Inputs

These are the almost complete Sass selector for Primefaces input components.


AutoComplete

This is Sass selector for AutoComplete component.

Input - AutoComplete
Input - AutoComplete
/* INPUT - AUTOCOMPLETE */

.ui-autocomplete {
  // CSS properties for this particular class preferably inherited from .ui-inputfield (Input - InputText)
  .ui-autocomplete-input {
    &.ui-state-hover, &.ui-state-focus {
    }
    &.ui-state-disabled {
      &:hover {
      }
    }
  }
  .ui-autocomplete-dropdown, .ui-autocomplete-dropdown.ui-state-hover,
  .ui-autocomplete-dropdown.ui-state-focus {
    .ui-icon {
    }
  }
}
.ui-autocomplete-panel {
  .ui-autocomplete-table {
  }
  .ui-autocomplete-list {
  }
  .ui-autocomplete-list-item {
    &.ui-state-highlight {
    }
  }
  .ui-autocomplete-query {
  }
}

BooleanButton

This is Sass selector for BooleanButton component.

Input - BooleanButton
Input - BooleanButton
/* INPUT - BOOLEANBUTTON */

.ui-selectbooleanbutton {
  &.ui-state-hover, &.ui-state-focus {
  }
  // CSS properties for this particular class preferably inherited from .ui-button (Button - Button)
  &.ui-button {
    &.ui-state-default {
    }
    &.ui-state-hover, &.ui-state-focus {
    }
    &.ui-state-active {
    }
    .ui-icon {
    }
    .ui-button-text {
    }
  }
}

Calendar

This is Sass selector for Calendar component.

Input - Calendar
Input - Calendar
/* INPUT - CALENDAR */

.ui-calendar {
  // CSS properties for this particular class preferably as a copy of .ui-inputfield (Input - InputText)
  .ui-inputfield {
    &.ui-state-hover, &.ui-state-focus {
    }
    &.ui-state-disabled {
      &:hover {
      }
    }
  }
}

.ui-datepicker {
  .ui-datepicker-header {
  }
  .ui-datepicker-prev {
    .ui-icon { }
  }
  .ui-datepicker-next {
    .ui-icon { }
  }
  .ui-datepicker-title {
    .ui-datepicker-month { }
    .ui-datepicker-year { }
  }
  .ui-datepicker-calendar {
    thead {
      tr {
      }
    }
    th {
      &.ui-datepicker-week-end { }
    }
    td {
      &.ui-datepicker-week-end {
        &:first-child {
          a {
          }
        }
      }
      &.ui-datepicker-other-month { }
      a {
        &.ui-state-hover { }
        &.ui-state-active {
        }
        &.ui-state-disabled { }
      }
    }
  }
}

.ui-datepicker-trigger {
  &.ui-state-hover, &.ui-state-focus { }
  &.ui-state-active { }
  .ui-icon { }
}

SelectOneMenu

This is Sass selector for SelectOneMenu component.

Input - SelectOneMenu
Input - SelectOneMenu
/* INPUT - SELECTONEMENU */

.ui-selectonemenu {
  .ui-selectonemenu-label { }
  .ui-selectonemenu-trigger {
    &.ui-state-hover, &.ui-state-focus { }
    &.ui-state-active { }
    &.ui-state-disabled { }
    .ui-icon { }
  }
}

.ui-selectonemenu-panel {
  .ui-selectonemenu-items-wrapper {
  }
  .ui-selectonemenu-filter-container {
    .ui-icon { }
  }
  .ui-selectonemenu-filter {
  }
  .ui-selectonemenu-items {
  }
  .ui-selectonemenu-table {
    td { }
  }
  .ui-selectonemenu-item-group {
  }
  .ui-selectonemenu-item {
    &.ui-state-hover, &.ui-state-focus { }
  }
}

InputText

This is Sass selector for InputText component.

Input - InputText
Input - InputText
/* INPUT - INPUTTEXT */

.ui-inputfield {
  &.ui-state-hover, &.ui-state-focus {
  }
  &.ui-state-disabled {
    &:hover {
    }
  }
}

SelectManyButton

This is Sass selector for SelectManyButton component.

Input - SelectManyButton
Input - SelectManyButton
/* INPUT - SELECTMANYBUTTON */

.ui-selectmanybutton {
  // CSS properties for this particular component should refer to .ui-button (Button - Button)
  .ui-button {
    &.ui-state-hover, &.ui-state-focus { }
    &.ui-state-active { }
    &.ui-state-disabled { }
    .ui-button-text { }
    .ui-icon { }
  }
}

SelectManyCheckbox

This is Sass selector for SelectManyCheckbox component.

Input - SelectManyCheckbox
Input - SelectManyCheckbox
/* INPUT - SELECTMANYCHECKBOX */

.ui-selectmanycheckbox {
  .ui-chkbox {
    // CSS properties for this particular component should refer to .ui-chkbox (Input - SelectBooleanCheckbox)
    &.ui-state-hover, &.ui-state-focus { }
    &.ui-state-active { }
    &.ui-state-disabled { }
    .ui-chkbox-icon { }
  }
}

SelectOneButton

This is Sass selector for SelectOneButton component.

/* INPUT - SELECTONEBUTTON */

.ui-selectonebutton {
  .ui-button {
    // CSS properties for this particular component should refer to .ui-button (Button - Button)
    &.ui-state-hover, &.ui-state-focus { }
    &.ui-state-active { }
    &.ui-state-disabled { }
    .ui-button-text { }
    .ui-icon { }
  }
}

Slider

This is Sass selector for Slider component.

Input - Slider
Input - Slider
/* INPUT - SLIDER */

.ui-slider {
  &.ui-slider-horizontal { }
  &.ui-slider-vertical { }
  .ui-slider-range { }
  .ui-slider-handle {
    &.ui-state-hover, &.ui-state-focus { }
    &.ui-state-active { }
    &.ui-state-disabled { }
  }
}

Password

This is Sass selector for Password component.

Input - Password
Input - Password
/* INPUT - PASSWORD */

// CSS properties for this particular component should refer to .ui-inputfield (Input - InputText)
.ui-password {
  &.ui-state-hover, &.ui-state-focus { }
  &.ui-state-disabled { }
  &.ui-state-error { }
}
.ui-password-panel {
  .ui-password-meter { }
  .ui-password-info { }
}

Inplace

This is Sass selector for Inplace component.

Input - Inplace
Input - Inplace
/* INPUT - INPLACE */

.ui-inplace {
  .ui-inplace-display {
    &.ui-state-hover, &.ui-state-focus {
    }
  }
  .ui-inplace-content {
    .ui-inputfield {
      // CSS properties for this particular component should refer to .ui-inputfield (Input - InputText)
    }
  }
  .ui-inplace-editor {
    .ui-inplace-save {
      .ui-icon { }
    }
    .ui-inplace-cancel {
      .ui-icon { }
    }
  }
}

InputTextArea

This is Sass selector for InputTextArea component.

Input - InputTextArea
Input - InputTextArea
/* INPUT - INPUTTEXTAREA */

.ui-inputtextarea {
  &.ui-state-hover, &.ui-state-focus { }
  &.ui-state-disabled { }
}

SelectBooleanCheckbox

This is Sass selector for SelectBooleanCheckbox component.

/* INPUT - SELECTBOOLEANCHECKBOX */

.ui-chkbox {
  &.ui-state-hover, &.ui-state-focus { }
  &.ui-state-active { }
  &.ui-state-disabled { }
  .ui-chkbox-icon { }
}

Editor Deprecated

This is Sass selector for Editor component. As you can check on the link, this component is deprecated, use TextEditor instead.

Input - Editor
Input - Editor
/* INPUT - EDITOR */

.ui-editor {
  iframe { }
}
.ui-editor-toolbar {
}
.ui-editor-group {
}
.ui-editor-button {
  &.ui-state-hover, &.ui-state-focus { }
  &.ui-state-disabled { }
  &[title="Bold"] { }
  &[title="Italic"] { }
  &[title="Underline"] { }
  &[title="Strikethrough"] { }
  &[title="Subscript"] { }
  &[title="Superscript"] { }
  &[title="Font"] { }
  &[title="Font Size"] { }
  &[title="Style"] { }
  &[title="Font Color"] { }
  &[title="Text Highlight Color"] { }
  &[title="Remove Formatting"] { }
  &[title="Bullets"] { }
  &[title="Numbering"] { }
  &[title="Outdent"] { }
  &[title="Indent"] { }
  &[title="Align Text Left"] { }
  &[title="Center"] { }
  &[title="Align Text Right"] { }
  &[title="Justify"] { }
  &[title="Undo"] { }
  &[title="Redo"] { }
  &[title="Insert Horizontal Rule"] { }
  &[title="Insert Image"] { }
  &[title="Insert Hyperlink"] { }
  &[title="Remove Hyperlink"] { }
  &[title="Cut"] { }
  &[title="Copy"] { }
  &[title="Paste"] { }
  &[title="Paste as Text"] { }
  &[title="Print"] { }
  &[title="Show Source"] { }
}
.ui-editor-divider {
}

TextEditor

This is Sass selector for TextEditor component.

/* INPUT - TEXTEDITOR */

SelectOneListBox

This is Sass selector for SelectOneListBox component.

Input - SelectOneListBox
Input - SelectOneListBox
/* INPUT - SELECTONELISTBOX */

.ui-selectonelistbox {
  .ui-selectlistbox-listcontainer {
  }
  .ui-selectlistbox-list {
  }
  .ui-selectlistbox-item {
    &.ui-state-hover { }
    &.ui-state-highlight { }
  }
}
.ui-selectlistbox-filter-container {
  .ui-selectlistbox-filter {
    &.ui-state-hover, &.ui-state-focus { }
  }
  .ui-icon { }
}

SelectManyMenu

This is Sass selector for SelectManyMenu component.

Input - SelectManyMenu
Input - SelectManyMenu
/* INPUT - SELECTMANYMENU */

.ui-selectmanymenu {
  .ui-selectlistbox-listcontainer {
  }
  .ui-selectlistbox-list {
  }
  .ui-selectlistbox-item {
    &.ui-state-hover { }
    &.ui-state-highlight { }
  }
}
.ui-selectlistbox-filter-container {
  .ui-selectlistbox-filter {
    &.ui-state-hover, &.ui-state-focus { }
  }
  .ui-icon { }
}

SelectOneRadio

This is Sass selector for SelectOneRadio component.

Input - SelectOneRadio
Input - SelectOneRadio
/* INPUT - SELECTONERADIO */

.ui-selectoneradio {
}
.ui-radiobutton {
  .ui-radiobutton-box {
    &.ui-state-hover, &.ui-state-focus { }
    &.ui-state-active { }
  }
  .ui-radiobutton-icon {
    &.ui-icon-bullet { }
  }
}

Spinner

This is Sass selector for Spinner component.

Input - Spinner
Input - Spinner
/* INPUT - SPINNER */

.ui-spinner {
  .ui-spinner-button {
    &.ui-spinner-up { }
    &.ui-spinner-down { }
    .ui-icon { }
  }
}
.ui-spinner-input {
}

InputSwitch

This is Sass selector for InputSwitch component.

Input - InputSwitch
Input - InputSwitch
/* INPUT - INPUTSWITCH */

.ui-inputswitch {
  .ui-inputswitch-off {
    span { }
  }
  .ui-inputswitch-on {
    span { }
  }
}

FileUpload

This is Sass selector for FileUpload component.

Input - FileUpload
Input - FileUpload
/* INPUT - FILEUPLOAD */

.ui-inputswitch {
  .ui-inputswitch-off {
    span { }
  }
  .ui-inputswitch-on {
    span { }
  }
}