CSS selector for form input types?

[audiolizard]

Is there a way to specify a form input type in a CSS selector? I'd like to add a style to my <input type="text"> elements in particular. How can you indicate the input type in the CSS selector?

[slider]

class="" or id="" same as any other tag.

[slider]

input.small {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 9px;
}

for instance...

[audiolizard]

Slider, INPUT tags aren't the "same as any other tag". I should have qualified my question. I don't want to add a class to every <input type="text">.

Is there a way to specify the TYPE attribute of the INPUT element in the CSS selector?

It seems like there should be since there are a number of different form elements that are INPUT elements. Or is this just an HTML design flaw? Ideally, each type of element would get it's own element name in HTML, like TEXTAREA, for example. That gets a unique tag that can be used in a CSS selector. It's inconsistent.

By the way, the root of this problem is the fact that IE6 forms look cool by default, and NS7 forms look like crap by default because of the old inset style inputs. I just want to make Netscape not look like crap.

[slider]

Originally posted by audiolizard
Is there a way to specify the TYPE attribute of the INPUT element in the CSS selector?

Sorry, I did miss that in your first post. Haven't played with setting the TYPE of an input element by CSS. Have you played with it and it doesn't work?

Originally posted by audiolizard
By the way, the root of this problem is the fact that IE6 forms look cool by default, and NS7 forms look like crap by default because of the old inset style inputs. I just want to make Netscape not look like crap.

input.main {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin: 0;
	padding: 1px;
	padding-left: 3px;
	border: solid #D8D8D8 1px ;
}

Is one I'm currently using to make NS/Moz forms not "look like crap".

[jofa]

http://www.sitepointforums.com/showt...threadid=76019

[audiolizard]

Slider, the problem is how do you specify a type attribute in CSS? I haven't seen it documented anywhere.

In jofa's post he mentioned trying input[type="submit"] but said that only works in Mozilla. Well, that's exactly what I want since IE already looks good. I'm not sure if it's valid CSS though.

In that thread, shoop also posted this JavaScript code, but I'm trying to avoid messy hacks for things that SHOULD be simple.

var x=document.getElementsByTagName('input')
for (i=0; i<x.length;i++) {
if (x[i].getAttribute('type')=='checkbox') {
x[i].className='myCheck';
}
if (x[i].getAttribute('type')=='radio') {
x[i].className='myRadio';
}
if (x[i].getAttribute('type')=='text') {
x[i].className='myText';
}
if (x[i].getAttribute('type')=='submit') {
x[i].className='mySubmit';
}
if (x[i].getAttribute('type')=='button') {
x[i].className='myButton';
}
}

[vgarcia]

Alternatively you can use CSS2 once it becomes better supported. Right now the only browser I know of that this works on is Mozilla 1.1+.(possibly 1.0 too)

<style type="text/css" media="screen">
/*Submit buttons*/
input[type="submit"]{

}
/*regular text boxes*/
input[type="text"]{

}
/*continue for all other types of inputs*/
</style>

--Vinnie

[jofa]

Sit back and wait for IE7
(Or more people using Mozilla)


Attribute selectors:
http://www.w3.org/TR/REC-CSS2/select...bute-selectors

[audiolizard]

Well, I tried the following, and it cleaned up the look of Netscape 7 and Opera 7 and didn't change anything in IE6:

form input[type="text"],textarea {
border: 1px solid #696999;
}

Thanks! So using brackets is the standard way to specify attributes in selectors in CSS2?

[blufive]

Thanks! So using brackets is the standard way to specify attributes in selectors in CSS2?

Yup.

See the "attribute selectors" section of the CSS2 spec

[audiolizard]

Thanks. I had searched the CSS1 spec but didn't find anything. So are there any disavdantages to using CSS2 besides the risk of a style not being recognized on certain browsers?

[vgarcia]

The problem with CSS2 is that IE6 has yet to support attribute selection. So use it all you want, but it probably won't work for 90%+ of your users. Maybe IE will use standards for real one day and not try to invent their own.

--Vinnie

[audiolizard]

Ahh, but forms on IE6 already look good, so I'm all set.

I'm almost ready to post my site for review...

[vgarcia]

Originally posted by audiolizard
Ahh, but forms on IE6 already look good, so I'm all set.

I'm almost ready to post my site for review...

Are you only looking at IE6 under Windows XP? Cause on Windows 2000 IE6's form elements are still the same old boring un-styled stuff.

--Vinnie

(WinXP at home, Win2k/Mac OSX/Linux(KDE) at work)