> For the complete documentation index, see [llms.txt](https://wotamann.gitbook.io/vuetify-form-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wotamann.gitbook.io/vuetify-form-base/schema/css.md).

# CSS

Customize your **vuetify-form-base** component using CSS-Classnames

{% hint style="warning" %}
Don't use  `<style scoped>` in parents component, because scoped definitions are inside the child component not accessable
{% endhint %}

### Formbase  Default-ID

`#form-base` is the default ID of your component. If you need different CSS for two or more forms in the same parent component, then change default value by setting a different ID for each component and use this new ID.&#x20;

```markup
<!-- Default ID -->   
<v-form-base @input="handleInput" />  
```

```markup
<style>
    #form-base { background-color:#DDF; }
</style>
```

### **Formbase Custom-ID**

```markup
<!-- Custom ID -->   
<v-form-base id="custom-id" @input="handleInput" />  
```

```css
<style>
    #custom-id { color:#AAA; }
</style>
```

### Class pointing to Type

Style all items of a specific type, then use type specific classnames. They start with **`type-`** appended by your **`[form-id]-`** followed by any componen&#x74;**`[type]`**. You can use all available types in your schema-object:

```markup
<!-- Default ID is 'form-base' -->   
<v-form-base @input="handleInput" />  
```

```css
.type-form-base-text { color: #44A; }
.type-form-base-email { font-weight:500; }  

// or better 

#form-base .type-form-base-text { color: #44A; }            	  
#form-base .type-form-base-email { font-weight:500; }  
```

### Class pointing to Key

Set class-name of deep key in your model-object, by converting **.dot notation** `'person.adress.city'` into **kebab case**  `like`**`person-adress-city`** prepending  **`key-`** and **`[form-id]-`**

```markup
<!-- Custom ID-->   
<v-form-base id="formadress" @input="handleInput" />  
```

```css
<!-- 
	    myModel: { person:{ adress:{ city:'',... } ... } ... } 
  CSS Classname to access to key 'city' in path 'person-adress'
-->
.key-formadress-person-adress-city { font-weight:500; }    


<!-- 
  Access to myModel: { name:'' }
  CSS Classname to access key 'name' 	       
-->
.key-formadress-name { font-weight:500; }            

<!-- 
  myModel: { controls: { slide: [25, 64]  } 
  Access First Entry in Array of Key Slide 
-->
.key-formadress-controls-slide-0 { font-weight:500; }  
```

### Validate with Pseudoselectors

```markup
<!-- Custom ID-->   
<v-form-base id="form-id" @input="handleInput" />  
```

```css
    <!-- Access all items --> 
    .item { background-color: #afa; }
    .item input:valid { background-color: #afa; }
    
    .type-form-id-email input:invalid { background-color: #faa; }
    .key-form-id-name input:focus { background-color: #ffd; }   
```

### CSS Code with Default ID

```markup
<!-- Default ID-->   
<v-form-base model="myModel" schema="mySchema" @input="handleInput" /> 
```

```javascript
myModel: {
    name: 'Base',
    password: '123456',
    email: 'base@mail.com',
    controls: {
      checkbox: true,
      switch: true,
      slider: 33,
      radioA: 'A',
      radioB: 'B'
    }
  }
```

```markup
<style>
  /* INFO-SCOPED: Don't use '<style scoped>' because scoped CSS is inside a child-component not accessable */

  /* CSS Component */
  #form-base { background-color: #fff9e6; }
  
  /* CSS Item --- set all items  */
  #form-base .item { padding:0.5rem; border: 1px dotted #eedf9b}

  /* CSS Type --- set all items of type ... */
  #form-base .type-form-base-switch { border-bottom: 3px solid #E23}
  #form-base .type-form-base-checkbox { background-color: #fdd }

   /* CSS Prop -- set all nested parts of property*/
  #form-base .prop-controls { background-color: #fcf2d2e0; border:1px solid #f0dc9a }

  /* CSS Keys --- set item with key */
  #form-base .key-form-base-name input { background-color: #cad7f077; color:#103c8f77 }
  #form-base .key-form-base-name input:focus { background-color: #1949a1b9; color:#FFF }  
</style>
```

### [**Example**](https://wotamann.github.io/css)