jquery - 无效选择的 JQM (jQueryMobile) 自定义 css

Question

我用于验证的自定义 CSS 是用红色边框勾勒出元素的轮廓。适用于输入但不适用于选择、单选和复选框，因为 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 或浏览器的开发人员工具之类的工具检查各个元素，因为根据您配置表单元素的方式，所使用的类可能会略有不同。