开发者

How do you set the style of a textbox (html)

I want to change the width of this only:

     <input type="text" nam开发者_运维问答e="experience"/>

But I have got this:

<input type="checkbox" name="option2" value="2222" />

changing too.. when I set:

input {width:134px;}


Give it a class or an id and use a class or id selector:

<input type="text" name="experience" id="experience" />
<input type="text" name="experience" class="experience" />

#experience { width:134px }
.experience { width:134px }

Alternatively, you could use an attribute selector:

input[name='experience'] { width:134px }

Note however that attribute selectors do not work in IE6, so if you want to support that you'll have to go with a class or id selector.


If you wish to apply only on a specific textbox, use the style attribute.

<input type="text" name="experience" style="width:134px"/>

If you want to apply it on all textboxes on the page, use the CSS:

.textbox { 
 width:134px; 
} 

and then apply it on the text:

<input type="text" name="experience" class="textbox"/>


Without changing the HTML, you can set the css using the name attribute:

input[name="experience"]{
    width:134px;
}


you should give the input box a class/id , for example:

/

Then you should set the style parameters in your .css stylesheet: In order to set class styliing use .name{...}, for id use #name{...}


You can set the style by type.

<input type="text" name="email">
<input type="text" name="phone">

input[type="text"]{ background:#ff0000; }


Your orginal question mentioned a single text input, however your follow up comment mentions you have many text inputs, to avoid repetition in your css files, you could set the class of the input to something like "short" and then apply the width on that class.

input.short {width : 134px}

If you want to apply the width to inputs in a particular form (or element), you could use:

form input {width : 134px}

This may be more scalable in future if you need to change the widths of all text inputs for a form / site

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜