Jump to content

CSS and Forms


ThePsion5

Recommended Posts

Hi guys,I know that I can style general form inputs by writing CSS for the input element, but is there any decent way to style a submit button without applying that same style to all other input elements or having to individually give them a class or ID? Thanks!-Sean

Link to comment
Share on other sites

is there any decent way to style a submit button without applying that same style to all other input elements or having to individually give them a class or ID?

If you don't want to apply the same style to all other input elements then your going to have to style by id,class or inline :) put this in an external .css
input.submit{color:red;border: 5px solid black}

put this as the submit button

<input type="submit" value="Submit" class="submit">

Link to comment
Share on other sites

In this case there's no alternative. I've tried doing that myself, specificying a class for an object based on the value of some attribute (in this case "type"), but with CSS that's not possible. The only 2 attributes that matter as far as I can tell are "id" and "class".

Link to comment
Share on other sites

Indeed, you can only target classes and IDs. HOWEVER, there is one tiny possibility!There is not much difference between <input type="button" /> and <button>...</button> :)You can use <button type="submit">click here</button> and style only the <button> element, having all those (used only as submit buttons) buttons styled without all the other input elements style for that matter.Remember there is a difference between these elements! Actually none lol

Link to comment
Share on other sites

You don't have to use id's, classes or inline style, no. You can base your css on attributes:HTML: <input type="submit" value="Submit" />CSS: input[type=submit] { css-info }The reason most people haven't heard about this is because it is mostly used in, that's right, forms. With xhtml and css, attributes are typically moved out of the xhtml spesification, so that there are just basic attributes for access that many elements can share.

Link to comment
Share on other sites

You don't have to use id's, classes or inline style, no. You can base your css on attributes:HTML: <input type="submit" value="Submit" />CSS: input[type=submit] { css-info }The reason most people haven't heard about this is because it is mostly used in, that's right, forms. With xhtml and css, attributes are typically moved out of the xhtml spesification, so that there are just basic attributes for access that many elements can share.

but does this work in IE??? :)
Link to comment
Share on other sites

It's all a part of the CSS 2.1 Pattern matching:http://www.w3.org/TR/CSS21/selector.html#q1As you know, IE supports :hover, :active and :visited on links. There's a lot of other stuff there it should support. :)http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

Link to comment
Share on other sites

It's all a part of the CSS 2.1 Pattern matching:http://www.w3.org/TR/CSS21/selector.html#q1As you know, IE supports :hover, :active and :visited on links. There's a lot of other stuff there it should support. :)http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

Just like the <label> one :) You're right :)
Link to comment
Share on other sites

I find it funny that they've actually used :active on the text, so it glows red onclick. Try it in IE, press for example "[att=val]":http://www.w3.org/TR/CSS21/selector.html#attribute-selectorsDoesn't work in IE. Ironic. :)Oh, and of course I'm right... :)

Link to comment
Share on other sites

There is not much difference between <input type="button" /> and <button>...</button> :)
I don't think we are talking about <input type="button">, I think we are dealing with submit buttons specifically (type="submit"). Submit buttons are unique in that they always submit the form that they appear in, which is why it would be helpful to target them for styles (nice info on the attribute selectors, if Microsoft decides to grace the web by including that in IE7 it will be good). You can always just use javascript to have anything submit the form, but then not only do you have to add the extra javascript (instead of just <input type="submit">), but if the user has javascript disabled then they won't be able to submit the form at all.
Link to comment
Share on other sites

True, but I myself only use <input type="button"> occasionally, so for me it is sort of the same as <input type="submit"> :)At least I mean that using BOTH <button> and <input> for respectively (submit)buttons and other input fields, it would already be easier to style :)(darn, english is my 2nd language, its so difficult to be understandable lol)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...