How To Play Around Custom Form Controls Using Pseudo Elements

In CSS there are a variety of styles we could try to make things look exactly the way we want. CSS CurrentColor and Pseudo Elements make a nice combination when it comes to successfully complete the web designing process. Designers already have much control over text, paragraph fields, submit buttons, but when it comes to form elements they often find it confusing and tricky, which is absolutely not. This tutorial will show you methods to style multiple form elements using pseudo elements and currentColor. So, with that in mind, we are choosing to style checkboxes and radios.

<label class="form-group"> 
  <input type="checkbox"> 
  <span class="form-control checkbox"> 
    Red
  </span> 
</label>

Understanding Styles

In this part, I am going to talk about every single rule of CSS used in this demo. It isn’t an uphill battle and you’ll definitely find it useful.

General

With CSS it’s absolutely easy to build components like box-sizing: border-box.

*, 
*:before, 
*:after { 
  box-sizing: border-box; 
}

The .form-group is used with HTML which contains both checkbox or radio and text together. It displays a pointer style because with this you can tell your visitors about the action ability of this element.

Also, if you are not sure about the user-select: none; declaration, however, that’s something which is not included within CSS3 feature and its behavior is expected to change in the future. But for a while, it’s absolutely a perfect way of preventing the text selection with the help of CSS.

.form-group { 
  cursor: pointer; 
  line-height: 2; 
  user-select: none;            
}  

In the above below, we will start customizing radios and appearance of checkboxes with the help of pseudo elements, however we need to hide the native form controls. The below mentioned is the most preferred solution we can bank on simply because it takes the guess work out by ignoring stuffs like display: none or visibility: hidden, which could hamper the accessibility level of a website.

.form-group > [type="checkbox"], 
.form-group > [type="radio"] { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 2px; width: 2px; 
  margin: -2 px; padding: 0; border: 0; 

  }

Now, the below mentioned CSS rules are laying the foundation of the next step. The .form-control has ‘relative’ positioning because its pseudo elements will be positioned as ‘absolute’.

Also, you must have noticed the ’em’ units. The role of these units is to allow form controls to be scaled up and down, on the bases of font-sizes.

.form-control { 
  display: inline-block; 
  position: relative; 
  padding-left: 2.1em; 
} 
.form-control::before, 
.form-control::after { 
  content: ''; 
  position: absolute; 
  left: 0; 
}        
 .form-control::before { 
  width: 2em; 
  height: 2em; 
  border: .2em solid; 
} 
.form-control::after { 
  top: .2em; left: .2em; 
  width: .7em; height: .7em; 
}

Here, the currentcolor value is border: .2em solid currentColor.

Experimenting with The Checkbox

Now, the main science used here is the well known “check” HTML entity, which is represented by Unicode U+2714. Further, for checkboxes and radios, we can make use of adjacent sibling selectors to achieve the toggle effect.

.form-control.checkbox::before { 
  border-radius: .2em; 
} 
.form-control.checkbox::after {  
  text-align: center;          
  content: "2714"; 
  line-height: .7em;                   
  opacity: 0; 
  transform: scale(.5); 
  transition: transform .1s ease; 
} 
.form-group > .form-control.checkbox:hover::after { 
  opacity: .3; 
} 
.form-group > input:checked + .form-control.checkbox::after { 
  opacity: 1; 
  transform: scale(1);       
}

Radio Form Element

Border property is heavily used to give desired effects to the radio form elements. The process is extremely simple, all we need is simple use a bit ‘border-radius’ for round effect, along with some ‘backgroud-clip’ to prevent the background from being expanded from its border and we are almost done.

Additionally, we are using the most important CSS property that is currentColor, which refers to the value of the current text color of the given element. The property can be used on any kind of declaration which accepts the color value.

After using this, we will proceed to use JavaScript snippet to determine the random order of some colors. It’s an easy way to see how every form control color changes itself as per the random order.

.form-control.radio::before, 
.form-control.radio::after { 
  border-radius: 50%; 
} 
.form-control.radio::after { 
  background-color: currentColor; 
  background-clip: padding-box; 
  border: .1em solid transparent; 
  opacity: 0; 
  transition: border .1s ease; 
} 
.form-group >.form-control.radio:hover::after { 
  opacity: .3;          
}            
.form-group > input:checked + .form-control.radio::after { 
  border-width: .1em; 
  opacity: 1;         
}

Working with The JavaScript Snippet

To make your color choices more impressive and interesting, one can make use of PleaseJS, a JavaScript library that allows you experiment with random colors for an added fun. While doing so, not to forget about reloading the demo in order to establish a better control over random colors.

var formControl       = document.querySelectorAll('.form-group'), 
    formControlLength = formControl.length, 
    pleaseColor       = Please.make_color({ 
      colors_returned: formControlLength, 
      saturation: 1, 
      value: .9 
    }); 
for (var i = 0; i < formControlLength; i++) { 
  formControl[i].style.color = pleaseColor[i]; 
}; 

Browser Support

The ::input-placeholder pseudo-element is currently supported by Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 and IE 10. however, the older versions of Firefox are compatible for both pseudo-element and pseudo-class.

Form controls and interactions play a crucial role in designing a high-impact website. The small changes and enhancements like this are a sure-proof way of providing an enthralling experience to our users.

Author Bio – Mike Swan is an experienced WordPress developer who helps in converting PSD to WordPress theme and share his experiences to users. With this article, he is making people aware about how to play custom form controls using pseudo elements.