Pete FreitagStyling input based on their type with CSS
By Pete Freitag
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.
Styling input based on their type with CSS was first published on March 06, 2006.
If you like reading about css, input, attribute, selectors, or ie then you might also like:
Discuss / Follow me on Twitter ↯
Tweet Follow @pfreitagComments
http://dean.edwards.name/IE7/
This library also fixes other IE6 issues, such as:
* Pure CSS Menus
* Complexspiral
* Box-Model
* Fixed Positioning
* Dynamic Pseudo Classes
* Rounded Corners
* XML
* PNG Transparency
*which doesn't work for 89%-90% for your potential user-base.
Roll on IE7 and automatic update, I say!
<style type="text/css"> INPUT.text { /* text style */ }
INPUT.file { /* file style */ }
INPUT.button { /* button style */ } </style>
I created a style that used your input.text and put the class reference. That worked. However, I did the same (copy paste) to input.button and that did not work. In the html, I used 'class="text"' and that worked. but 'class="button"' did not work. I also added input:button, input#button, input->button and anything else I could think of for future parsing approaches to the CSS file. Help?
<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...