Song Vang - CSS – Styling With Attribute Selectors

Every now and then, I will be documenting code tips as easy references for myself as I develop Web pages. I found myself in a frustrating situation last week when I needed to style a group of form elements but did not have access to the third party source code to add class selectors. The parent stylesheet also contained default input selectors that caused all input fields, regardless of whether they were hidden or not, to display onscreen. This was a problem for me as hidden fields, should well remain…hidden. The select menu drop downs were also a horrendous sight and needed proper widths set.

I remembered a technique in which you could target an attribute inside of a tag which would then allow you to style the element in question.

<input value="" name="state" type="hidden">

<label for="state">State:</label>
<select name="stateName" id="state">
</option><option value="MN">Minnesota
</option>
…

To keep the hidden field undisplayed, I simply added positioning properties to keep it offscreen. I also added a width property to the select selector.

Solution

<style type="text/css">

input[type="hidden"] { position: absolute; left: -999px; width: 990px; }

select[name="stateName"] { width:250px; }

</style>

<input value="" name="state" type="hidden">

<label for="state">State:</label>
<select name="stateName" id="state">
</option><option value="MN">Minnesota
</option>
…

You could even take it farther by adding a little regex to target even more specific elements in your code.

Add ^ to match any attribute with a certain word at the beginning of the value.

select[name="^stateName"] { width:250px;}

Add $ to match any attribute with a certain word at the end of the value.

select[name="$stateName"] { width:250px;}

Add * to match any attribute with a certain word anywhere of the value.

select[name="*stateName"] { width:250px;}