You can’t currently use CSS to target input elements of a specific type. (i.e. radio, text, etc). This can be a pain when you want to set padding on radio buttons, or a width on textfields. Today’s issue was adding left padding to a button.
I decided to throw together some script to find these elements and apply the appropriate style info, and this is what I came up with:
function cssInputTypeFix(tipe, stile,val) {
<!-- until browsers support CSS input type -->
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].getAttribute("type") == tipe) {
inputs[i].style[stile]= val;
}
}
}
I then applied this when the page loaded, with Simon Willison’s handy dandy addLoadEvent script
addLoadEvent(function() {
//cssInputTypeFix(type,style,val)
cssInputTypeFix('button', 'marginLeft', '5px');
}
)
And of course, as soon as I finished I did a search on the web and found this article: http://www.dustindiaz.com/input-element-css-woes-are-over/ It is along the same lines, although he creates styles such as input.text, input.button and uses the onload event to append the appropriate classname. Well, mine can do that too
cssInputTypeFix(‘button’, ‘className’, ‘button’)
where you have a class named button.










You can match attributes and attribute values in css to only apply styles to specific elements.
The reference is REC-CSS2-19980512 section 5.8.1
I use this to display an image in front of links that deosn’t contain wiki.pl in the href.
.wikitext a:before {
content: url(”/images/remote.gif”);
}
.wikitext a[href*="wiki.pl"]:before {
content: “”;
}
As to adding padding to a button”
input[type="button"] {
/* add 1em of space to the left of the button text */
padding-left: 1em;
/* add 1em of space th the left of the button */
margin-left: 1em;
}
hth
Nowell