ThePsion5 Posted May 8, 2006 Share Posted May 8, 2006 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 More sharing options...
skym Posted May 8, 2006 Share Posted May 8, 2006 I found this once:http://www.badboy.ro/articles/2005-07-23/index.phpI didn't have the chance to try it and might be a little complicated, but it looks interesting. Link to comment Share on other sites More sharing options...
scott100 Posted May 8, 2006 Share Posted May 8, 2006 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? <{POST_SNAPBACK}> 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 .cssinput.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 More sharing options...
ThePsion5 Posted May 8, 2006 Author Share Posted May 8, 2006 Damn, I guess I'll have to do it that way then, lol. Thanks for the help though! Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 9, 2006 Share Posted May 9, 2006 When you've experienced always writing only classed input elements, you'll probably won't know anything else Link to comment Share on other sites More sharing options...
justsomeguy Posted May 9, 2006 Share Posted May 9, 2006 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 More sharing options...
Jack McKalling Posted May 10, 2006 Share Posted May 10, 2006 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 More sharing options...
Jonas Posted May 10, 2006 Share Posted May 10, 2006 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 More sharing options...
Jack McKalling Posted May 10, 2006 Share Posted May 10, 2006 Where did you get this information ?Why isn't this explained at the tutorial? Link to comment Share on other sites More sharing options...
aspnetguy Posted May 10, 2006 Share Posted May 10, 2006 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.<{POST_SNAPBACK}> but does this work in IE??? Link to comment Share on other sites More sharing options...
scott100 Posted May 10, 2006 Share Posted May 10, 2006 Handy info Jonasdare i say it though... doesn't work in IE are we surprised, na! Link to comment Share on other sites More sharing options...
aspnetguy Posted May 10, 2006 Share Posted May 10, 2006 Handy info Jonasdare i say it though... doesn't work in IEÂ Â are we surprised, na!<{POST_SNAPBACK}> Just like all those wonderful pseudo tags (:before, :hover) that can't be used in IE...curses on IE, may it RIP...quickly. Link to comment Share on other sites More sharing options...
Jonas Posted May 10, 2006 Share Posted May 10, 2006 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 More sharing options...
Jack McKalling Posted May 10, 2006 Share Posted May 10, 2006 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<{POST_SNAPBACK}> Just like the <label> one You're right Link to comment Share on other sites More sharing options...
Jonas Posted May 10, 2006 Share Posted May 10, 2006 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 More sharing options...
justsomeguy Posted May 10, 2006 Share Posted May 10, 2006 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 More sharing options...
Jack McKalling Posted May 10, 2006 Share Posted May 10, 2006 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now