Css input text field width

Width of input type=text element

the input ends up 2 px wider than the div in both IE6 and FF3? What am I missing? EDIT: As many people have said, the border is the issue. If I set border: 0px on the input, it will have the same width as the div with a 0 px border (verified by wrapping it inside a bordered SPAN). However, when I measure the elements in paint, the div has a 14 px interior, just as expected (10+2+2). The input, however, has a 16 px interior, and then a border outside of that. Why is this? Probably not a bug since it happens in both IE6 and FF3, but I dont understand it.

4 Answers 4

I believe that is just how the browser renders their standard input. If you set a border on the input:

Then both are the same width, at least in FF.

The visible width of an element is width + padding + border + outline , so it seems that you are forgetting about the border on the input element. That is, to say, that the default border width for an input element on most (some?) browsers is actually calculated as 2px, not one. Hence your input is appearing as 2px wider. Try explicitly setting the border-width on the input, or making your div wider.

Read about outline here: quirksmode.org/css/outline.html It says it does not count towards the width of the box, which is true, but it does change the visible width.

input width is 10 + 2 times 1 px for border

I think you are forgetting about the border. Having a one-pixel-wide border on the Div will take away two pixels of total length. Therefore it will appear as though the div is two pixels shorter than it actually is.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.20.43540

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Set width of an input text box in HTML, CSS, and JavaScript

This post will discuss how to set the width of an input text box in HTML, CSS, and JavaScript.

1. Set width in HTML

In HTML, you can use the width attribute to set the width of an element.

Alternatively, you can also use the size attribute to define the width of the .

2. Set width with CSS

It is good practice to separate CSS from HTML markup. The idea is to define a class to set the width CSS property.

HTML

CSS

Alternatively, you can also use the CSS selector of an input text box for setting the width CSS property.

HTML

CSS

3. Set width with JavaScript

With JavaScript, you can use the setAttribute() method to set the value of the size attribute on the input text box.

You can also dynamically change the width of a text box to match the length of the input. We can easily do this by setting the size attribute on key events.

JS

HTML

That’s all about setting the width of an input text box in HTML, CSS, and JavaScript.

Average rating 4.01 /5. Vote count: 83

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Tell us how we can improve this post?

Thanks for reading.

Please use our online compiler to post code in comments using C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.

Like us? Refer us to your friends and help us grow. Happy coding 🙂

This website uses cookies. By using this site, you agree to the use of cookies, our policies, copyright terms and other conditions. Read our Privacy Policy. Got it

Источник

CSS Forms

The look of an HTML form can be greatly improved with CSS:

Styling Input Fields

Use the width property to determine the width of the input field:

Example

The example above applies to all elements. If you only want to style a specific input type, you can use attribute selectors:

• input[type=text] — will only select text fields
• input[type=password] — will only select password fields
• input[type=number] — will only select number fields
• etc..

Padded Inputs

Use the padding property to add space inside the text field.

Tip: When you have many inputs after each other, you might also want to add some margin , to add more space outside of them:

Example

Note that we have set the box-sizing property to border-box . This makes sure that the padding and eventually borders are included in the total width and height of the elements.
Read more about the box-sizing property in our CSS Box Sizing chapter.

Bordered Inputs

Use the border property to change the border size and color, and use the border-radius property to add rounded corners:

Example

If you only want a bottom border, use the border-bottom property:

Example

Colored Inputs

Use the background-color property to add a background color to the input, and the color property to change the text color:

Example

Focused Inputs

By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input.

Use the :focus selector to do something with the input field when it gets focus:

Example

Example

Input with icon/image

If you want an icon inside the input, use the background-image property and position it with the background-position property. Also notice that we add a large left padding to reserve the space of the icon:

Example

input[type=text] <
background-color: white;
background-image: url(‘searchicon.png’);
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
>

Animated Search Input

In this example we use the CSS transition property to animate the width of the search input when it gets focus. You will learn more about the transition property later, in our CSS Transitions chapter.

Example

input[type=text] <
transition: width 0.4s ease-in-out;
>

input[type=text]:focus width: 100%;
>

Styling Textareas

Tip: Use the resize property to prevent textareas from being resized (disable the «grabber» in the bottom right corner):

Example

textarea <
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
>

Styling Select Menus

Example

select <
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
>

Styling Input Buttons

Example

input[type=button], input[type=submit], input[type=reset] <
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
>

/* Tip: use width: 100% for full-width buttons */

For more information about how to style buttons with CSS, read our CSS Buttons Tutorial.

Responsive Form

Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.

Advanced: The following example uses media queries to create a responsive form. You will learn more about this in a later chapter.

Aligned Form

An example of how to style labels together with inputs to create a horizontal aligned form:

Источник

Input size vs width

Which one is optimal cross-browser code? Of course it depends on requirements, but I’m curious to know how people decide and on what basis.

It’s usually a bad idea to use «px» on the web. You might consider using relative units instead («em», «%», etc.).

10 Answers 10

You can use both. The css style will override the size attribute in browsers that support CSS and make the field the correct width, and for those that don’t, it will fall back to the specified number of characters.

Edit: I should have mentioned that the size attribute isn’t a precise method of sizing: according to the HTML specification, it should refer to the number of characters of the current font the input will be able to display at once.

However, unless the font specified is a fixed-width/monospace font, this is not a guarantee that the specified number of characters will actually be visible; in most fonts, different characters will be different widths. This question has some good answers relating to this issue.

The snippet below demonstrates both approaches.

@font-face < font-family: 'Diplomata'; font-style: normal; font-weight: 400; src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; >@font-face < font-family: 'Open Sans Condensed'; font-style: normal; font-weight: 300; src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; >p < margin: 0 0 10px 0; >input < font-size: 20px; >.narrow-font < font-family: 'Open Sans Condensed', sans-serif; >.wide-font < font-family: 'Diplomata', cursive; >.set-width

Most fonts are not mono-width. Regarding «the number of characters the field will be able to display at once». Which character do you mean?

@jbyrd Yes, that is the case—but the answer is correct according to the HTML specification. I’ve edited the answer now to clarify things a bit.

I suggest, probably best way is to set style’s width in em unit 🙂 So for input size of 20 characters just set style=’width:20em’ 🙂

In CSS, em is relative to the font-size of its direct or nearest parent. An example: if the inherited font-size of an element is 16px, and you set the font-size to be 2em, the resulting size will be 32px (16px*2em). The «em» unit is not character quantity. More: w3.org/TR/css3-values/#font-relative-lengths and kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs and j.eremy.net/confused-about-rem-and-em

@Jess, good question. In typography, ’em’ used to mean the width of the ‘M’ character. For a long time, I believed the same thing. However, in CSS and digital typography, the ’em’ equals the height of the font in points. This is to accommodate character sets that do not have the ‘M’ character, or where the ‘M’ is not the full height or width of the font.

size is inconsistent across different browsers and their possible font settings.

The width style set in px will at least be consistent, modulo box-sizing issues. You might also want to set the style in ‘em’ if you want to size it relative to the font (though again, this will be inconsistent unless you set the input’s font family and size explicitly), or ‘%’ if you are making a liquid-layout form. Either way, a stylesheet is probably preferable to the inline style attribute.

You still need size for to get the height to line up with the options properly. But I’d not use it on an .

I want to say this goes against the «conventional wisdom», but I generally prefer to use size. The reason for this is precisely the reason that many people say not to: the width of the field will vary from browser to browser, depending on font size. Specifically, it will always be large enough to display the specified number of characters, regardless of browser settings.

For example, if I have a date field, I typically want the field wide enough to display either 8 or 10 characters (two digit month and day and either two or four digit year, with separators). Setting the size attribute essentially guarantees me that the entire date will be visible, with minimal wasted space. Similarly for most numbers — I know the range of values expected, so I’ll set the size attribute to the proper number of digits, plus decimal point if applicable.

As far as I can tell, no CSS attribute does this. Setting a width in em, for example, is based off the height, not the width, and thus is not very precise if you want to display a known number of characters.

Of course, this logic doesn’t always apply — a name entry field, for example, could contain any number of characters. In those cases I’ll fall back to CSS width properties, typically in px. However, I would say the majority of fields I make have some sort of known content, and by specifying the size attribute I can make sure that most of the content, in most cases, is displayed without clipping.

Источник