JQM（jQueryMobile）自定义css为无效的select [英] JQM (jQueryMobile) custom css for invalid select

问题描述

我的自定义CSS用于验证是用红色边框勾勒元素。对于输入，但不是选择，无线电和复选框作为jQM添加了自己的标记为这些标签。

My custom CSS for validation is to outline the element with a red border. Works for inputs but not Select, Radio and Checkboxes as jQM adds it's own markup for these tags.

所以我有这个CSS和它的工作伟大的输入标签，只是没有选择，电台和复选框

So I have this for the CSS and it works great for the input tag, just not Select, Radio and Checkboxes

/* html5 */
input[type='text'],
input[type='number'],
input[type='email'],
textarea, select { 
    border: solid 1px #999;
}
input[type='text'].focus,
input[type='number'].focus,
input[type='email'].focus,
textarea.focus, select.focus { 
    border-color: #000 !important; 
}
input[type='text'].invalid,
input[type='number'].invalid,
input[type='email'].invalid,
textarea.invalid, select.invalid { 
    border-color: red;
}
input[type='text'].inactive,
input[type='number'].inactive,
input[type='email'].inactive,
textarea.inactive, select.inactive, option.inactive { 
    color: #999;
    font-style: italic;
}
input[type='text'].required,
input[type='number'].required,
input[type='email'].required, 
textarea.required { 
    background: url(../images/asterisk_red.png) right 5px no-repeat;
}

推荐答案

Radio和Checkbox元素被DOM中的其他元素完全替换（实际上，它们设置为隐藏，DOM元素放在它们的顶部，但效果是一样的）。因此，要对这些元素应用样式，您必须将样式应用于不同于您期望的选择器。对于类似单选按钮的情况，您必须将样式应用于 .ui-radio .ui-btn

In jQuery Mobile, Select, Radio and Checkbox elements are replaced completely with other elements in the DOM (actually, they're set to hidden and DOM elements are placed on top of them, but the effect is the same..). So, to apply styles to these elements, you have to apply styles to a different selector than you'd expect. For something like the radio buttons, you'd have to apply the styles to .ui-radio .ui-btn

找出你需要的样式的最好方法是使用类似firebug或浏览器开发者工具来检查单个元素，因为根据你如何配置表单元素，所使用的类可能会略有不同。

The best way to figure out what styles you need is to inspect the individual elements with something like firebug or the browser's developer tools, since the classes used can be slightly different depending on how you're configuring the form elements.

这篇关于JQM（jQueryMobile）自定义css为无效的select的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！