July 24, 200917 yr Author Noooo, i was just wondering if it's possible to reset it back to it's default state.
July 25, 200917 yr ^ just don't add any styling in the first place? If you don't style then it will be default
July 25, 200917 yr You would just not style it, e.g. if you want all the inputs in the content div to have a red border then you would do this: div#content input { border:1px solid red; } And then all other inputs will be default styling.
July 25, 200917 yr The border isn't mentioned in the standard attributes here http://www.w3.org/TR/html4/interact/forms.html but you could try an inline style <input style="border: none" type="checkbox" name="Extras" value="Manual"> and see if that cancels the previously styled border ( or border:0; or just border="0" without the style="...")
July 25, 200917 yr Author It's just everything you can reset to it's standard browser default, except for form elements? Just wondered if it was possible, but the more i think about it, form sections aren't really standardised, i mean they look different depending on browser and/or operating system. It just seems a bit poor that as soon as you introduce a border property for input elements, theirs no going back, and no overwriting the styles back to a default state. I tried a few things, but didn't have much luck. I wondered if their was any way to some how force inheritance of styles but omit previous rules. Like if i did fieldset {margin:0; padding:0; border:inherit !important} * {margin:0; padding:0; border:none}
September 27, 200916 yr From Googling around it seems as if IE use Windows to draw their borders with whatever engine they use and don't let it be targetted with CSS. From a few pages it seemed definitive that you could not get it right accross the board without little differences in looks or browser specific code. This has annoyed the last nerve out of me. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Forms</title> <style type="text/css"> body, form, fieldset, p, label, input, textarea, select, option, checkbox, span { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; border: none; } form { margin: 20px; width: 400px; } fieldset { padding: 10px 10px 10px 10px; border: 1px solid #666; } label { padding: 7px; border: 1px solid #666; display: block; } select { margin: 10px 0 10px 0; border: 1px solid #F00; } option { border: 1px solid #F00; } textarea { border: 1px solid #F00; margin: 10px 0 10px 0; padding: 10px; width: 250px; } input#text { border: 1px solid #F00; margin: 10px 0 10px 0; padding: 10px; } input#checkbox { margin: 10px 0 10px 0; } input#reset { border: 1px solid red; margin: 10px 0 10px 0; padding: 10px; } input#send { border: 1px solid green; margin: 10px 0 10px 0; padding: 10px; } </style> <!--[if IE]> <style type="text/css"> span { border: 1px solid #F00; overflow: hidden; } <![endif]--> </style> </head> <body> <form action="" method="post"> <fieldset> <p><label>Text input:</label> <input type="text" name="field" id="text" value="This is a text input value" /></p> <p><label>Select list:</label> <span><select name="drop" id="dropdown"> <option value="true" selected>Some value</option> <option value="true">Some value</option> <option value="true">Some value</option> <option value="true">Some value</option> <option value="true">Some value</option> <option value="true">Some value</option> <option value="true">Some value</option> </select></span></p> <p><label>Text area:</label> <textarea name="message" rows="7" cols="20">This is the text area text</textarea></p> <p><label>Checkbox:</label> <input type="checkbox" value="true" id="checkbox" /><p> <p><input type="reset" value="Clear form" id="reset" /> <input type="submit" value="Submit form" id="send" /></p> </fieldset> </form> </body> </html> Produces the results in the browsers IE6, 7, 8, Webkit and Gecko (specifically Chrome, 3.0.195.21 and Firefox, 3.5.3) Images attached. Guess we have to continue to hack away, should probably included Opera in this list and Safari, well it uses web kit.
September 27, 200916 yr Author Aha, sexy, love a man and his screenshots But the question was, now you've made a consistent(ish) style across the board, can you reset it to the default value WITHOUT removing or re targeting your css? for example p{border:1px solid} p:last-child{border:none} That would mean that all but the last paragraph would have a border, as you've overwritten/reset the styling for the last paragraph back to its default/original state. However, with form elements, you can't get back to the original state? The easy solutions, as probably mentioned, would just be to utilise classes, but i just want to know if theirs anyway to do this via css without any additional html markup. So basically i want to work out if it is at all possible to take <input type="text" value="Style me" /> <input type="text" value="Don't Style me" /> And target only the first one with the styling. With any other elements you could style both and then use last-child(css2) to reset the last one back to the original state. Granted a well structured form should always have id's in the elements for the sake of the label tags, however say this doesn't have them, nor do you have the ability to change the html in any way. How could you achieve it without dipping into css3?
Create an account or sign in to comment