Better HTML For Better Design Of Form Fields

Better HTML for better Form Fields

Some form fields look different on certain browser as per its behaviour. Here I have managed same design for all fields in all the browsers.

In this blog, code is provided for all the form fields.

Feature:

  • Support in all browsers and OS & devices (Android & i Phone). I.e. Browser Compatible.
  • Easy to use.
  • SCSS & CSS both codes are available.
  • Compatible with IE 9 and higher version.
  • No need of third party JS, CSS and libraries.

How To Create identical Form fields

1. Radio button and Checkbox design

Better HTML for better Form Fields

CSS code:

/*
 * Custom Checkbox design
 * Custom Radio button design
 */
.input-rc {
  display: inline-block;
  margin: 0 5px;
  font-size: 16px;
}
.input-rc input[type='checkbox'],
.input-rc input[type='radio'] {
  display: none;
  opacity: 0;
}
.input-rc input[type='checkbox'] + .input-rc-span,
.input-rc input[type='radio'] + .input-rc-span {
  float: left;
  display: inline-block;
  height: 8px;
  width: 8px;
  margin: 0 8px 0 0;
  border: 5px solid #7EB530;
  background-color: #7EB530;
  cursor: pointer;
  content: '';
}
.input-rc input[type='checkbox']:checked + .input-rc-span:after,
.input-rc input[type='radio']:checked + .input-rc-span:after {
  content: '';
  display: block;
  height: 9px;
  width: 4px;
  margin: -3px 0 0px 1px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.input-rc input[type='radio'] + .input-rc-span { /* Custom radio button design */
  height: 12px;
  width: 12px;
  margin-top: -2px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 5px solid #0C496D;
  background-color: #0C496D;
}
.input-rc input[type='radio']:checked + .input-rc-span {
  background-color: #FFF;
}
.input-rc input[type='radio']:checked + .input-rc-span:after {
  display: none;
}
/* End */

HTML: Please use below HTML code

<!-- Custom Radio button -->
<div>
  <label>
     <div class="input-rc">
        <input type="radio" name="gender" value="male">Male
        <span class="input-rc-span"></span>
     </div>
   </label>
   <label>
     <div class="input-rc">
        <input type="radio" name="gender" value="Female">Female
        <span class="input-rc-span"></span>
     </div>
   </label>
 </div>

<!-- Custom Checkbox -->
 <div>
    <label>
      <div class="input-rc">
         <input type="checkbox" name="hobby" value="Reading">Option 1
         <span class="input-rc-span"></span>
       </div>
    </label>
    <label>
        <div class="input-rc">
          <input type="checkbox" name="hobby" value="Singing">Option 2
          <span class="input-rc-span"></span>
       </div>
     </label>
     <label>
        <div class="input-rc">
           <input type="checkbox" name="hobby" value="Singing">Option 3
           <span class="input-rc-span"></span>
        </div>
     </label>
  </div>


Otherwise, you can use jQuery code to maintain HTML structure for Radio & Checkbox fields when HTML structure is not editable.

JavaScript:

jQuery(document).ready(function() {
   jQuery('input[type="radio"], input[type="checkbox"]').wrap('<div class="input-rc"></div>');
   jQuery('.input-rc').append('<span class="input-rc-span"></span>');
});

2: File upload OR input type file field design

‘No file chosen’ & browser btn both are editable text.

Better HTML for better Form Fields

CSS code:

/*
 * Custom design of input[type='file']
 */
.input-file {
  display: inline-block;
}
.input-file .input-file-name {
  float: left;
  display: inline-block;
  width: 250px;
  height: 35px;
  padding: 8px 15px;
  border: 1px solid #CCC;
  color: #000;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  direction: rtl;
  text-align: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.input-file .input-file-sub {
  float: right;
  position: relative;
  display: inline-block;
  height: 35px;
  width: 75px;
  margin: 0;
  cursor: pointer;
  vertical-align: top;
}
.input-file .input-file-sub:before {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 8px 0;
  background: #000;
  color: #FFF;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  content: 'Browse';  /* You can edit this text for browse button text */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.input-file .input-file-sub input {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 35px 0;
  cursor: pointer;
  opacity: 0;
}
/* End */

JavaScript:

jQuery(document).ready(function() {

 /* Custom input type file js */
 jQuery('.input-file-sub input').change(function() {
   var filename = jQuery(this).val();
     jQuery(this).parent().parent().children(".input-file-name").text(filename);
     var target = event.target || event.srcElement;
     if (target.value.length == 0) {
       jQuery(this).parent().parent().children(".input-file-name").text('No file chosen');
     } 
   });
 });

HTML: Please use below HTML code

<!-- Custom file upload -->
 <div class="input-file">
   <div class="input-file-sub">
     <input type="file" name="">
   </div>
    <span class="input-file-name">No file chosen</span>
 </div>

Otherwise, you can use jQuery code to maintain HTML structure for File upload fields when HTML structure is not editable.

JavaScript:

jQuery(document).ready(function() {
   jQuery('input[type="file"]').wrap('<div class="input-file"><div  class="input-file-sub"></div></div>');
  jQuery('.input-file').prepend('<span class="input-file-name">File name here</span>');
});

Note: You can change ‘No file chosen’ text in js and html code and you can change ‘Browse’ button text in css code.

3: Select option field design

Better HTML for better Form Fields

CSS code:

/*
 * Select option design
 */
.select-tag {
  position: relative;
  float: left;
  display: inline-block;
  width: 200px;
  background: #FFF;
  border: 1px solid #B6B6B6;
}
.select-tag:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: 0;
  height: 0;
  margin: 11px 5px 0 0;
  border-top: 8px solid #8A8A8A;
  border-right: 5px solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 5px solid transparent;
  content: '';
}
.select-tag select {
  position: relative;
  z-index: 1;
  height: auto;
  width: 100%;
  padding: 5px 25px 5px 10px;
  text-align: left;
  color: #000;
  border: none;
  background: transparent;
  line-height: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.select-tag select::-ms-expand {
  display: none;
}
/* End */

HTML: Please use below HTML code

<!-- Select option  -->
<div class="select-tag">
  <select>
     <option>Ahmedabad</option>
     <option>Rajkot</option>
     <option>Baroda</option>
  </select>
</div>

Seems easy right? Once you have solution it really seems easy, try once and feel free to share your valuable feedbacks. Need more assistance regarding Web Design Services Contact us now!