4imble 4imble - 4 years ago 166
HTML Question

Adding Css class to all <input type'text'> elements? Javascript / Css?

I want to apply a CSS class to every textbox in my site:

<div class="editor-label">
<label for="FoodType">FoodType</label>
</div>
<div class="editor-field">
<input id="HelpText" name="FoodType" type="text" value="" />
</div>

<p>
<input type="submit" value="Create" />
</p>


And I thought, Hey! Easy. I'll add a jquery function to find them all in the masterpage.

<script type="text/javascript">
$(document).ready(function(){
$('input').addClass('textbox');
}
</script>


Unfortunately this will also select the submit button. How can i only select input elements that have a text type attribute?

Alternativly is this possible using entirely CSS?

If both these methods are not possible, i guess i will just have to manually add the class to every textbox i make?

Answer Source

AFAIK it's:

$('input[type=text]').addClass('textbox');

And you can do similar in the CSS file, but that requires higher version of CSS / depending how broad you want to be with older browsers.

See attribute selectors in here. Note that:

"Browser support: The only browser that doesn’t support CSS3 attribute selectors is IE6. Both IE7 and IE8, Opera and Webkit- and Gecko-based browsers do. So using them in your style sheet is definitely safe."

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download