Добавление класса Css ко всем элементам <input type'text '>? Javascript / Css? - PullRequest
Новая
       0

Добавление класса Css ко всем элементам <input type'text '>? Javascript / Css?

7 голосов
/ 14 мая 2010

Я хочу применить класс CSS для каждого текстового поля на моем сайте: 

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

И я подумал: эй! Легко. Я добавлю функцию jquery, чтобы найти их всех на главной странице. 

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

К сожалению, это также выберет кнопку отправки. Как выбрать только те элементы ввода, которые имеют атрибут типа текста?

Альтернативно это возможно с использованием полностью CSS?

Если оба эти метода невозможны, я думаю, мне просто нужно будет вручную добавить класс в каждое текстовое поле, которое я создаю?

Ответы [ 2 ]

24 голосов
/ 14 мая 2010

AFAIK это: 

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

И вы можете сделать то же самое в файле CSS, но для этого требуется более высокая версия CSS / в зависимости от того, насколько широкими вы хотите быть в старых браузерах.

См. Селекторы атрибутов в здесь . Обратите внимание, что:

"Поддержка браузера: единственный браузер, который не поддерживает селекторы атрибутов CSS3, - это IE6. И браузеры IE7 и IE8, и Opera, и Webkit-, и Gecko делают. Поэтому их использование в таблице стилей определенно безопасно." 1011 *

0 голосов
/ 28 декабря 2015 
<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...