JQM (jQueryMobile) custom css for invalid select

问题

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.

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

回答1:

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

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.

来源：https://stackoverflow.com/questions/5781957/jqm-jquerymobile-custom-css-for-invalid-select