Блог

Мой пользовательский CSS для проверки заключается в том, чтобы обвести элемент красной рамкой. Работает для входных данных, но не для Select, Radio и флажков, поскольку jQM добавляет собственную разметку для этих тегов.

Итак, у меня есть это для CSS, и оно отлично работает для тега ввода, только без выбора, радио и флажков

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

В jQuery Mobile элементы Select, Radio и Checkbox полностью заменены другими элементами в DOM (на самом деле, им присвоено значение hidden, а элементы DOM размещены поверх них, но эффект тот же ..). Таким образом, чтобы применить стили к этим элементам, вам нужно применить стили к другому селектору, чем вы ожидали. Для чего-то вроде переключателей вам пришлось бы применить стили к .ui-radio .ui-btn

Лучший способ выяснить, какие стили вам нужны, — это проверить отдельные элементы с помощью чего-то вроде firebug или инструментов разработчика браузера, поскольку используемые классы могут немного отличаться в зависимости от того, как вы настраиваете элементы формы.