PF-Select
ready

Introduction

CSS-only (no JS dependency) version of the styled select components

Examples

Basic styled select

<select class="pf-select" >
  <option value="option 1">Option 1</option>
  <option value="option 2">Option 2</option>
  <option value="option 3">Option 3</option>
  <option value="option 4">Option 4</option>
  <option value="option 5">Option 5</option>
</select>

Disabled styled select

<select class="pf-select"  disabled>
  <option value="option 1">Option 1</option>
  <option value="option 2">Option 2</option>
  <option value="option 3">Option 3</option>
  <option value="option 4">Option 4</option>
  <option value="option 5">Option 5</option>
</select>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_pf-select.scss

Usage

Class/JavaScript Hook Description Required?
.pf-select Placed on the select you want to style. Required