Styling 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.
Tweet
Related Entries
- 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...
Was exactly what I needed!
Gunther from Brazil
Post a Comment
Recent Entries
- ColdFusion returning empty response with server-error: true
- Careful applying CF11u16, CF2016u8, CF2018u2
- Sessions don't work in Chrome but do in IE
- csrfVerifyToken does not invalidate the token
- The cf_sql_ is optional in cfqueryparam
- Cookie Expires / Max-Age 1969-12-31T23:59:59.000Z
- Burst Throttling on AWS API Gateway Explained
- How to Resolve Java HTTPS Exceptions