### [Customizing the Style of Fancy Fields](https://wpforms.com/docs/customizing-the-style-of-fancy-fields/)

**Published:** June 4, 2024
**Author:** David Ozokoye

**Excerpt:** Learn how to customize the individual style of fancy fields.

**Content:**

Would you like to style individual fields in your forms, without affecting other form fields? With the right CSS selector, you can change the styles of any form component to fit your needs.

This tutorial provides a list of selectors you’ll need to style fancy fields in WPForms.

**Note:** The steps in this tutorial are advanced and require some knowledge of CSS. If you prefer not to use any code, you can see our guide on [styling WPForms in the block editor](https://wpforms.com/docs/styling-your-forms/ "How to Customize WPForms with CSS Hero (Without HTML or CSS)").

### Using the Code Snippets Below

Below is a list of the CSS selectors you’ll need to target specific fancy fields with your CSS code.

We’ve also included the default styles that WPForms automatically applies to those selectors. To customize any part of your form, you can copy a CSS snippet from this tutorial into your site, and then edit it as needed.

**Note:** Not sure how to add CSS to your site? Check out [WPBeginner’s tutorial on adding custom CSS to your WordPress site](http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/ "How to Easily Add Custom CSS to Your WordPress Site").

- [Fancy Fields](#fancy-fields)
    - [Phone](#phone)
    - [Address (US or International)](#address)
    - [Date/Time](#date-time)
    - [File Upload](#file-upload)
    - [Website/URL](#website)
    - [Password](#password)
    - [Repeater](#repeater)
    - [Page Break](#page-break)
    - [Section Divider](#section-divider)
    - [Entry Preview](#entry-preview)
    - [HTML](#html)
    - [Content](#content-field)
    - [Rating](#rating)
    - [Custom Captcha](#captcha)
    - [Rich Text](#rich-text)
    - [Signature](#signature)
    - [Likert Scale](#likert-scale)
    - [Net Promoter Score](#net-promoter-score)

**Note:** To learn more about using the code below, be sure to check our tutorial on [customizing the style of standard fields and other form elements](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/).

---

### Fancy Fields

#### Phone

![Phone field](https://wpforms.com/wp-content/uploads/2021/10/Phone-field.png "Phone number field")

##### Phone Padding

```
.wpforms-form .wpforms-field.wpforms-field-phone {
    padding: 10px 0;
    clear: both;
}
```

##### Phone Label

```
.wpforms-form .wpforms-field.wpforms-field-phone .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
```

##### Phone Input Box

```
.wpforms-form .wpforms-field.wpforms-field-phone input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}
```

##### Country List Dropdown (Smart Format)

```
.wpforms-form .wpforms-field.wpforms-field-phone .iti__country-list {
    position: absolute;
    z-index: 2;
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0 0 0 -1px;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
    background-color: white !important;
    border: 1px solid #CCC;
    white-space: nowrap;
    max-height: 200px;
    overflow-y: scroll;  
}
```

#### Address (US or International)

![Address field](https://wpforms.com/wp-content/uploads/2021/10/Address-field.png "Address field")

##### Address Padding

```
.wpforms-form .wpforms-field.wpforms-field-address {
    padding: 10px 0;
    clear: both;
}
```

##### Address Label

```
.wpforms-form .wpforms-field.wpforms-field-address .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
```

##### Address Input Boxes

```
.wpforms-form .wpforms-field.wpforms-field-address input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}
```

##### Address Dropdown (US Scheme: State)

```
.wpforms-form .wpforms-field.wpforms-field-address select.wpforms-field-address-state {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}
```

##### Address Dropdown (International Scheme: Country)

```
.wpforms-form .wpforms-field.wpforms-field-address select.wpforms-field-address-country {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}
```

#### Date/Time

![Date Time field](https://wpforms.com/wp-content/uploads/2021/10/Date-Time-field.png "Date Time selector")

##### Date/Time Padding

```
.wpforms-form .wpforms-field.wpforms-field-date-time {
    padding: 10px 0;
    clear: both;
}
```

##### Date/Time Label

```
.wpforms-form .wpforms-field.wpforms-field-date-time .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
```

##### Date/Time Input Box

```
.wpforms-form .wpforms-field.wpforms-field-date-time input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}
```

##### Date/Time Date Picker: Whole Calendar

![Date picker calendar](https://wpforms.com/wp-content/uploads/2021/10/Date-picker-calendar.png "Date picker")

```
.flatpickr-calendar {
    background: transparent;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    padding: 0;
    -webkit-animation: none;
    animation: none;
    direction: ltr;
    border: 0;
    font-size: 14px;
    line-height: 24px;
    border-radius: 5px;
    position: absolute;
    width: 293.75px;
    box-sizing: border-box;
    -webkit-transition: top .1s cubic-bezier(0,1,.5,1);
    transition: top .1s cubic-bezier(0,1,.5,1);
    z-index: 9999999999;
    background: #fff;
    box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,.08);
}
```

##### Date/Time Date Picker: Current Date on Calendar

```
.flatpickr-day.today {
    border-color: #959ea9;
}
```

##### Date/Time Date Picker: Past and Next Month Days on Calendar

```
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(57,57,57,.3);
    background: transparent;
    border-color: transparent;
    cursor: default;
}
```

##### Date/Time: Time Picker

![Time picker](https://wpforms.com/wp-content/uploads/2021/10/Time-picker.png "Time picker")

```
.ui-timepicker-wrapper {
    overflow-y: auto;
    height: 142px;
    width: 6.5em;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    outline: none;
    z-index: 10001;
    margin: 0;
}
```

#### File Upload

![File Upload field](https://wpforms.com/wp-content/uploads/2021/10/File-Upload-field.png "File upload field")

##### File Upload Padding

```
.wpforms-form .wpforms-field.wpforms-field-file-upload {
    padding: 10px 0;
    clear: both;
}
```

##### File Upload Label

```
.wpforms-form .wpforms-field.wpforms-field-file-upload .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
```

#### Website/URL

![Website URL field](https://wpforms.com/wp-content/uploads/2021/10/Website-URL-field.png "Website field")

##### Website/URL Padding

```
.wpforms-form .wpforms-field.wpforms-field-url {
    padding: 10px 0;
    clear: both;
}
```

##### Website/URL Label

```
.wpforms-form .wpforms-field.wpforms-field-url .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
```

##### Website/URL Input Box

```
.wpforms-form .wpforms-field.wpforms-field-url input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}
```

#### Password

![Password field](https://wpforms.com/wp-content/uploads/2021/10/Password-field-1.png "Password field")

#### Password Padding

```
.wpforms-form .wpforms-field.wpforms-field-password {
    padding: 10px 0;
    clear: both;
}
```

##### Password Label

```
.wpforms-form .wpforms-field.wpforms-field-password .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
```

##### Password Sublabels

```
.wpforms-form .wpforms-field.wpforms-field-password .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}
```

##### Password Input Box

```
.wpforms-form .wpforms-field.wpforms-field-password input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}
```

#### Repeater

![Repeater field](https://wpforms.com/wp-content/uploads/2024/05/repeater-field.png)

##### Add and Remove Block Buttons

![Block buttons](https://wpforms.com/wp-content/uploads/2024/05/block-buttons.png)

```
.wpforms-form .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons {
    margin-top: 15px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
}
```

###### Add Block Button

![Add button](https://wpforms.com/wp-content/uploads/2024/05/add-button.png)

```
.wpforms-form .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons.wpforms-field-repeater-button-add {
    background: none;
    border: none;
    border-radius: 4px;
    min-height: 33px;
    max-width: 33%;
    padding: 6px 12px;
    line-height: 18px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
    transition: opacity 0.2s ease;
    outline: none;
}
```

###### Remove Block Button

![Remove button](https://wpforms.com/wp-content/uploads/2024/05/remove-button.png)

```
.wpforms-form .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons.wpforms-field-repeater-button-remove {
    background: none;
    border: none;
    border-radius: 4px;
    min-height: 33px;
    max-width: 33%;
    padding: 6px 12px;
    line-height: 18px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
    transition: opacity 0.2s ease;
    outline: none; 
}
```

##### Add and Remove Row Buttons

![Add and remove row buttons](https://wpforms.com/wp-content/uploads/2024/05/add-remove-row-buttons.png)

```
.wpforms-form .wpforms-field-repeater .wpforms-field-layout-rows .wpforms-field-repeater-display-rows-buttons {
    position: absolute;
    right: 10px;
    left: unset;
    padding: 0;
    display: none;
    gap: 8px;
}
```

#### Page Break

##### Next Button

![Next-button](https://wpforms.com/wp-content/uploads/2021/10/Next-button.png "Next button")

```
.wpforms-form .wpforms-page-button.wpforms-page-next {
    background-color: #eee;
    border: 1px solid #ddd;
    color: #333;
    font-size: 1em;
    padding: 10px 15px;
}
```

##### Previous Button

![Previous button](https://wpforms.com/wp-content/uploads/2021/10/Previous-button.png "Previous button")

```
.wpforms-form .wpforms-page-button.wpforms-page-prev {
    background-color: #eee;
    border: 1px solid #ddd;
    color: #333;
    font-size: 1em;
    padding: 10px 15px;
}
```

#### Section Divider

![Section Divider field](https://wpforms.com/wp-content/uploads/2021/10/Section-divider.png "Section divider")

##### Section Divider Padding

```
.wpforms-form .wpforms-field.wpforms-field-divider {
    padding: 10px 0;
    clear: both;
}
```

##### Section Divider Title

```
.wpforms-form .wpforms-field.wpforms-field-divider h3 {
    font-size: 24px;
}
```

##### Section Divider Description

```
.wpforms-form .wpforms-field.wpforms-field-divider .wpforms-field-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}
```

#### Entry Preview

![Entry preview](https://wpforms.com/wp-content/uploads/2021/10/entry-preview.png "Form entry preview")

##### Entry Preview Padding

```
.wpforms-form .wpforms-field.wpforms-field-entry-preview {
    padding: 10px 0;
    clear: both;
}
```

##### Entry Preview Notice

![Entry preview notice](https://wpforms.com/wp-content/uploads/2021/10/entry-preview-notice.png "Form submission preview")

```
.wpforms-form .wpforms-field.wpforms-field-entry-preview .wpforms-entry-preview-notice {
    box-sizing: border-box;
    padding: 15px;
    background: #fef8ee;
    border: 1px solid #f0b849;
    display: block;
    width: 100%;
    word-break: break-word;
}
```

##### Entry Preview Table

![Entry preview table](https://wpforms.com/wp-content/uploads/2021/10/entry-preview-table.png "Entry preview")

```
.wpforms-form .wpforms-field.wpforms-field-entry-preview .wpforms-entry-preview-basic {
    border-bottom: 1px solid #dddddd;
    padding-bottom: 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow: hidden;
}
```

#### HTML

##### HTML Padding

```
.wpforms-form .wpforms-field.wpforms-field-html {
    padding: 10px 0;
    clear: both;
}
```

#### Content

##### Content Input Box

```
.wpforms-form .wpforms-field.wpforms-field-content {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 20px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 120px;
    width: 100%;
    line-height: 1.3;
}
```

#### Rating

![Rating-field-stars](https://wpforms.com/wp-content/uploads/2021/10/Rating-field-stars.png "Rating")

##### Rating Padding

```
.wpforms-form .wpforms-field.wpforms-field-rating {
    padding: 10px 0;
    clear: both;
}
```

##### Rating Label

```
.wpforms-form .wpforms-field.wpforms-field-rating .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
```

##### Rating Item Padding

```
.wpforms-form .wpforms-field-rating-item {
    padding-right: 6px;
}
```

#### Custom Captcha

![Captcha field](https://wpforms.com/wp-content/uploads/2021/10/Custom-Captcha-field.png "Custom captcha field")

##### Custom Captcha Padding

```
.wpforms-form .wpforms-field.wpforms-field-captcha {
    padding: 10px 0;
    clear: both;
}
```

##### Custom Captcha Label

```
.wpforms-form .wpforms-field.wpforms-field-captcha .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
```

#### Rich Text

![Rich Text field](https://wpforms.com/wp-content/uploads/2021/10/rich-text-field-1.png "Rich text field")

##### Rich Text Padding

```
.wpforms-form .wpforms-field.wpforms-field-richtext {
    padding: 10px 0;
    clear: both;
}
```

##### Rich Text Label

```
.wpforms-form .wpforms-field.wpforms-field-richtext .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
```

#### Signature

![Signature field](https://wpforms.com/wp-content/uploads/2021/10/Signature-field.png "Signature field")

##### Signature Padding

```
.wpforms-form .wpforms-field.wpforms-field-signature {
    padding: 10px 0;
    clear: both;
}
```

##### Signature Label

```
.wpforms-form .wpforms-field.wpforms-field-signature .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
```

#### Likert Scale

![Likert Scale field](https://wpforms.com/wp-content/uploads/2021/10/Likert-Scale-field.png "Likert scale")

##### Likert Scale Padding

```
.wpforms-form .wpforms-field.wpforms-field-likert_scale {
    padding: 10px 0;
    clear: both;
}
```

##### Likert Scale Label

```
.wpforms-form .wpforms-field.wpforms-field-likert_scale .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
```

#### Net Promoter Score

![Net-promoter-score-field](https://wpforms.com/wp-content/uploads/2021/10/Net-Promoter-Score-field.png "Net promoter scale")

##### Net Promoter Score Padding

```
.wpforms-form .wpforms-field.wpforms-field-net_promoter_score {
    padding: 10px 0;
    clear: both;
}
```

##### Net Promoter Score Label

```
.wpforms-form .wpforms-field.wpforms-field-net_promoter_score .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
```

##### Net Promoter Score Table

```
.wpforms-form .wpforms-field.wpforms-field-net_promoter_score table {
    width: 100%;
    line-height: 1.4;
    border-collapse: initial;
}
```

That’s it! Now you know how to use these selectors to apply custom CSS to fancy fields on your forms.

Next, would you apply theme styles to change the overall design of your form? Our tutorial on [using form themes](https://wpforms.com/docs/using-form-themes/) covers all the steps in detail.

**Categories:** Styling and Customization

---