Pete FreitagStyling input based on their type with CSS
A few weeks ago I posted how I style forms with CSS. Here's another trick that could be used with that technique.
Suppose your creating a form with a couple text fields and a submit button. Now you want to set the width of the text fields, but you want your submit button to be set to the default size. If you did something like this:
input { width: 200px; }
All input tags would be 200px; we only want input tags with type="text" to be 200px; you can use attribute selectors:
input[type="text"] { width: 200px; }
Attribute selectors are super handy but they don't work in IE6! You may still find them useful, just make sure you test on IE to make sure things still look ok. Just a note to always check your styles work on multiple browsers and resolutions - your visitor may be viewing on Mozilla on a 24" monitor or a Lenovo netbook with Chrome, and you want your site to look good in all cases.
Like this? Follow me ↯
Tweet Follow @pfreitagYou might also like:
- Web Standards Browser Test - April 14, 2005
Comments
<script language="javascript" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('.testclass input[type=button]').css({
'border':'1px solid red',
'background':'#ddd',
'width':'200px'
});
$('.testclass input[type=text]').css({
'border':'1px solid blue',
'background':'#ccc'
});
})
</script>
</head>
<body>
<div class="testclass">
<input name="" type="text" />
<textarea name="" cols="" rows=""></textarea>
<input name="" type="button" value="submit" />
</div>
</body>
</html>
Plz do comment...
