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

Question

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?

atiquratik · Accepted Answer · 2014-03-21 06:40:02Z

32

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."

edited Mar 21, 2014 at 6:40

atiquratik

1,3003 gold badges28 silver badges35 bronze badges

answered May 14, 2010 at 17:01

eglasius

35.9k5 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bobince Over a year ago

$('input[type=text]') will work in IE6 because jQuery will fall back to using its own selector engine rather than the browser's built-in support. input[type=text] { ... } in a CSS stylesheet, on the other hand, would fail in IE6.

Andrea Ligios Over a year ago

@bobince the canonical solution would be parsing the HTML with a RegEx I guess

mohnstrudel Over a year ago

How would I do that in CSS or SCSS?

Andreas Louv · Accepted Answer · 2015-12-28 13:30:36Z

-1

<!DOCTYPE html>

<html>
<head>

<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>


<script type="text/javascript">
$(document).ready(function(){

$(".post_class").css({padding:"10px",background:"#333",color:"#fff"});

$("#post_button").css({padding:"10px",background:"#333", textAlign:"center",color:"#fff",cursor:"pointer"})

$("#post_button").click(function(){
var input = $("input[name='checkListItem']").val();

$(".post_class").append('<div class="item">' + input + '</div>');

});

});
</script>


</head>

<body>

<form name="checkListForm">

<input type="text" name="checkListItem"/>

</form>

<div id="post_button">Post</div>

<br/>

<div class="post_class"></div>

</body>

</html>

edited Dec 28, 2015 at 13:30

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

answered Dec 28, 2015 at 9:48

Sahil Jain

11

1 Comment

fisk Over a year ago

This doesn't answer the question at all so why is this posted here?

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related