/    Sign up×
Community /Pin to ProfileBookmark

Is it possible to target specific types of form elements with CSS?

Copy linkTweet thisAlerts:
Jul 01.2008

Hi,

Is it possible to target specific types of form elements with CSS?

For example, let’s say I want to have a CSS property for all of my form [b]text inputs[/b]. Is there something like:

[code=html]
input text {
width: 100px;
}
[/code]

.. for targetting all text inputs?

Or to target [b]all checkboxes[/b]:

[code=html]
input checkbox {
float: left;
}
[/code]

**NOTE: The above CSS code [b][u]does not work![/u][/b]. I used it to show what I am *trying* to do.

Is it possible?

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@callumdauthorJul 01.2008 — *edit*

Thought I had it, but no..
Copy linkTweet thisAlerts:
@LeeUJul 01.2008 — Yes, it would be more like this:
[CODE]
textarea {
width: 250px;
height: 150px;
}

input {
width: 180px;
margin-bottom: 5px;
}[/CODE]
Copy linkTweet thisAlerts:
@callumdauthorJul 01.2008 — Yes, it would be more like this:
[CODE]
textarea {
width: 250px;
height: 150px;
}

input {
width: 180px;
margin-bottom: 5px;
}[/CODE][/QUOTE]

No good.

[b]input[/b] tagets textboxes, submit buttons, checkboxes..

I want to know how to target [b]only[/b] textboxes, or [b]only[/b] submit buttons, etc.

Using "input" targets them all.
Copy linkTweet thisAlerts:
@Declan1991Jul 01.2008 — Not with present CSS support. If CSS 3 is ever fully implemented, it would be<i>
</i>input[type=text] {

}
Best thing at the moment is to use classes. Not pretty, but needed. You can cut down by having text as the default (i.e. without a class), and put the class on the checkboxes container etc.
Copy linkTweet thisAlerts:
@Jeff_MottJul 01.2008 — Not with present CSS support. If CSS 3 is ever fully implemented, it would be<i>
</i>input[type=text] {}
[/quote]Just a small detail... that type of selector actually is present CSS. It's in the CSS 2 spec. The reason using it isn't a good option is because IE doesn't support it.

So... different reason, but the bottom line is the same—to use classes as Declan said.
Copy linkTweet thisAlerts:
@Declan1991Jul 02.2008 — Just a small detail... that type of selector actually is present CSS. It's in the CSS 2 spec.[/QUOTE]
Typo, I'm sorry about that. I probably should have given you the link while I was at it, [url=http://www.w3.org/TR/REC-CSS2/selector.html]CSS 2 selectors[/url].
Copy linkTweet thisAlerts:
@callumdauthorJul 02.2008 — Thanks guys.
Copy linkTweet thisAlerts:
@gabrieleJul 02.2008 — You can use JQuery though to add it after loading the page, although it might be a bit overkill to load a framework just to add a few classes..

better go with the different class for each item ..
×

Success!

Help @callumd spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...