Определить CSS для ввода, используя класс стиля

Question

Я пытаюсь определить правило css, которое применяется ко всем полям ввода данного класса стилей («beveledInput»). Например, при написании этой xhml код:

<p:inputText value="#{filtersBean.titleLike}" styleClass="beveledInput" /> 

это результирующий HTML-код

<input type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all beveledInput" name="_xyz_WAR_xyz_:j_idt5:j_idt33" id="_xyz_WAR_xyz_:j_idt5:j_idt33" role="textbox" aria-disabled="false" aria-readonly="false"> 

До сих пор мне удалось определить этот стиль CSS,

.aui input[type="text"], 
.aui input[type="search"], 
.aui textarea, 
.aui 
.uneditable-input { 
    border-radius: 4px; 
    border-color: #333333; 
    height: 12.5px; 
    width: 220px; 
} 

но из Конечно, он применяется ко всем входным полям, и это не то, что мне действительно нужно.

Как использовать этот стиль только при использовании класса beveledInput css?

Answer 1

Воспользоваться combination of classes в CSS

.aui input[type="text"].beveledInput, 
.aui input[type="search"].beveledInput, 
.aui textarea.beveledInput, 
.aui .uneditable-input.beveledInput { 
    border-radius: 4px; 
    border-color: #333333; 
    height: 12.5px; 
    width: 220px; 
} 

Answer 2

Попробуйте это в качестве примера:

Применить CSS стиль

<style> 
     .inputText{ 
      color: blue !important; 
      border-radius: 4px; 
      border-color: #333333; 
      height: 12.5px; 
      width: 220px; 
     } 
</style> 

И Primefaces компонент

<p:inputText styleClass="inputText" />