用于无效选择的 JQM (jQueryMobile) 自定义 css

Question

我用于验证的自定义 CSS 是用红色边框勾勒出元素的轮廓。适用于输入，但不适用于 Select、Radio 和 Checkboxes，因为 jQM 为这些标签添加了自己的标记。

所以我有这个用于 CSS，它对输入标签非常有用，只是不适用于 Select、Radio 和 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;
}

Answer 1

在 jQuery Mobile 中，Select、Radio 和 Checkbox 元素完全替换为 DOM 中的其他元素（实际上，它们被设置为隐藏，并且 DOM 元素被放置在它们之上，但效果是一样的..） .因此，要将样式应用于这些元素，您必须将样式应用于与您预期不同的选择器。对于单选按钮之类的东西，您必须将样式应用于.ui-radio .ui-btn

确定所需样式的最佳方法是使用诸如 firebug 或浏览器的开发工具之类的工具检查各个元素，因为根据您配置表单元素的方式，使用的类可能会略有不同。