The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Set The Size Of An HTML Input Number Field

TL;DR

I'm using this to set the size of number input fields.

TODO: Pull subtitle into page object code_start_default_section code_end_default_section

Details

Chrome is automatically sizing form input number fields for me if I put both _min__ and _max__ attributes on them. Firefox is not.

The _size__ attribute also doesn't work. Instead I'm using the above CSS to set the size using the _ch__ unit which is the width "O" character for the font.

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Set The Size Of An HTML Input Number Field

-- tldr/

I'm using this to set the size of number
input fields. 

-- code/
-- css

.number_inputs {
  width: 3ch;
}

-- /code


-- /tldr

-- h2

Details

Chrome is automatically sizing form input number 
fields for me if I put both _min__ and _max__ 
attributes on them. Firefox is not. 

The _size__ attribute also doesn't work. Instead
I'm using the above CSS to set the size using 
the _ch__ unit which is the width "O" character
for the font. 

-- ref
-- title: MDN: form input type = number
-- url: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

-- ref
-- title: MDN: CSS Units and Values
-- url: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

-- categories
-- HTML 
-- WebDev 

-- metadata
-- date: 2023-08-07 00:10:49
-- id: 2tdmhijc
-- site: aws
-- type: post
-- status: published