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.
add to del.icio.usRelated Entries
- Web Standards Browser Test - April 14, 2005
Trackbacks
Trackback Address: 548/A6AA54B19EACB8FEDECA17816A426F05
Comments
On 03/06/2006 at 4:20:30 AM EST Tony Petruzzi wrote:
1
"Attribute selectors are super handy but they don't work in IE6!"
That is why CSS has this thing called classes. Designate a class for the text inputs and one for the button inputs.
On 03/06/2006 at 4:50:34 AM EST Pete Freitag wrote:
2
Tony, I'm aware of classes, but attribute selectors allow you to style specific elements without designating a class. The saved typing is what makes them handy!
On 03/06/2006 at 6:02:57 AM EST Dan G. Switzer, II wrote:
3
Dean Edwards has created a solution for using CSS Selectors in IE6 that he called "IE7" (which isn't the greatest name.)
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
On 03/06/2006 at 10:07:13 AM EST Richard@Home wrote:
4
you can use attribute selectors:*
*which doesn't work for 89%-90% for your potential user-base.
Roll on IE7 and automatic update, I say!
On 03/06/2006 at 10:08:15 AM EST Richard@Home wrote:
5
grrr... didn't spot the comments on daughters titchy screen... time to upgrade, I say!
On 02/01/2007 at 9:42:33 AM EST beth wrote:
6
This came in super handy. As for Tony, I don't have access to all the code I'm styling. Our forms are generated dynamically from code by a separate dev team, so this is the only option I have for controlling how a group checkboxes are styled.
On 01/07/2008 at 2:36:49 PM EST Andy wrote:
7
This works in IE7 and Firefox:
<style type="text/css"> INPUT.text { /* text style */ }
INPUT.file { /* file style */ }
INPUT.button { /* button style */ } </style>
I'm under the impression it works under IE6, but not 100% sure as I don't have access to IE6 any more since upgrading.
On 04/02/2008 at 12:21:38 AM EDT Rambabu wrote:
8
This not working in IE7 and Firefox:
<style type="text/css"> INPUT.text { /* text style */ }
INPUT.file { /* file style */ }
INPUT.button { /* button style */ } </style>
On 01/19/2009 at 9:55:38 AM EST Claudiu wrote:
9
that styling works. once you add that style to your css, make sure you add the class="button" to the input button.
On 06/21/2009 at 12:02:56 PM EDT brandon wrote:
10
I am using IE 8.0.6001.18783
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?
On 08/18/2009 at 10:05:50 PM EDT Hanan wrote:
11
Very useful tips indeed. Thanks
On 12/10/2009 at 5:00:54 PM EST Erik wrote:
12
Just what I needed! Thanks, Pete.
Post a Comment
Recent Entries
- Cache Template in Request Setting Explained
- What Version of Java is ColdFusion Using?
- ColdFusion 9 Performance Brief from Adobe
- Request Filtering in IIS 7 Howto
- J2EE Session Cookies on ColdFusion / JRun
- Hands on ColdFusion Security Training
- ColdFusion 9 Solr Vulnerability - Are you at Risk?
- FCKEditor Year 2010 Bug for Firefox 3.6 with ColdFusion
That is why CSS has this thing called classes. Designate a class for the text inputs and one for the button inputs.
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'm under the impression it works under IE6, but not 100% sure as I don't have access to IE6 any more since upgrading.
<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?
