将Css类添加到所有< input type'text'>元素? Javascript / Css? [英] Adding Css class to all <input type'text'> elements? Javascript / Css?

查看:91
本文介绍了将Css类添加到所有< input type'text'>元素? Javascript / Css?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

 < div class =editor-label 

我想在我的网站的每个文本框中应用一个CSS类。 >
< label for =FoodType> FoodType< / label>
< / div>
< div class =editor-field>
< input id =HelpTextname =FoodTypetype =textvalue =/>
< / div>

< p>
< input type =submitvalue =Create/>
< / p>

我想,嘿!简单。

 < script type =text / javascript>我将添加一个jquery函数在masterpage中查找它们。 ; 
$(document).ready(function(){
$('input')。addClass('textbox');
}
< / script>

不幸的是,这也会选择提交按钮。我怎样才能选择具有文本类型属性的输入元素? / p>

如果这两种方法都不可行,我想我会必须手动将类添加到我创建的每个文本框?
$ b

解决方案

$ b

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

您可以在CSS文件中做类似的工作,但这需要更高版本的CSS /取决于您希望在较旧的浏览器中使用多大的广告。



请参阅 here 。请注意:



< blockquote>

浏览器支持:唯一不支持CSS3属性选择器的浏览器是IE6。 IE7和IE8,Opera和基于Webkit和Gecko的浏览器都可以。所以在你的样式表中使用它们是绝对安全的。



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?

解决方案

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

这篇关于将Css类添加到所有&lt; input type'text'&gt;元素? Javascript / Css?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆