All Form Types

Styling for all form elements

by kthornbloom

HTML

<form class="styled-form">

  <div class="texty-input">
    <input name="firstname" type="text">
    <label> Text Input</label>
  </div>

  <div class="texty-input">
    <input name="firstname" type="text" placeholder="Placeholder">
    <label> Text Input w/ Placeholder</label>
  </div>

  <div class="texty-input">
    <input name="firstname" type="text" required>
    <label> Required Text</label>
  </div>

  <div class="texty-input">
    <input name="firstname" type="text" disabled>
    <label> Disabled Text</label>
  </div>


  <div class="texty-input">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <label for="">Textarea</label>
  </div>

  <div class="texty-input">
    <input type="search">
    <label for="">Search</label>
  </div>

  <div class="texty-input">
    <input type="email">
    <label for=" ">Email</label>
  </div>

  <div class="texty-input">
    <input type="url">
    <label>URL</label>
  </div>

  <div class="texty-input">
    <input type="tel">
    <label for="">Telephone</label>
  </div>

  <div class="texty-input">
    <input type="number">
    <label for="">Number</label>
  </div>



  <div class="texty-input">
    <input type="date">
    <label for="">Date</label>
  </div>

  <div class="texty-input">
    <input type="month">
    <label for="">Month</label>
  </div>

  <div class="texty-input">
    <input type="week">
    <label for="">Week</label>
  </div>

  <div class="texty-input">
    <input type="time">
    <label>Time</label>
  </div>

  <div class="texty-input">
    <input type="datetime-local">
    <label for="">Date & Time</label>
  </div>

  <br><br>

  <div class="radio-input">
    <input type="radio" name="radio" value="yes"  id="radio1"> 
    <label for="radio1">Yes</label>
    <input type="radio" name="radio" value="no" id="radio2">
    <label for="radio2">No</label>
    <input type="radio" name="radio" value="no" id="radio3" required>
    <label for="radio3">Required</label>
  </div>

  <div...

SCSS

.styled-form {
  input, select {
    /* Required Styling */
    &:required + label:after {
       content:' *';
       color:red;
    }
    
    &:required:valid + label:after {
    	 content:'';
       width:.4em;
       height:.9em;
       display:inline-block;
       border-right:1px solid green;
       border-bottom:1px solid green;
       transform:rotate(45deg);
       color:green;
       margin-left:.6em;
       vertical-align:top;
    }
}
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],  
  input[type="date"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  .dropdown-result {
    
  /* DEFAULT INPUT STATE */
    background:none;
    border:none;
    border:1px solid #ccc;
    outline:none;
    width:100%;
    padding:1.75em 1em .75em 1em;
    box-sizing:border-box;
    font-size:1rem;
    transition:.2s;
    color:#555;

    /* OTHER STATES */
    &:disabled {
      opacity:.5;
      cursor: not-allowed;
      + label {
        opacity:.5;
      }
    }
    
    &:hover:not(:disabled) {
      border:1px solid #000;
    }
        
    &:focus {
      border:1px solid blue;
      color:blue;
    }
  }
   
  /* Slide labels for inputs w/o default placeholders */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    + label {
      top:.9em;  
    }
    &:focus + label,
    &:placeholder-shown + label {
      padding: 0;
      top: .5em;
      font-size: .75em;
    }
  }
  
  /* Static labels for inputs with default placeholders */
  input[type="date"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[type="datetime-local"],
  select {
    + label {
      padding: 0;
      top: .5em;
      font-size: .75em;
      opacity:.8;
    }
  }
  
  /* Color Input */
 ...

JavaScript

$('.texty-input input, .texty-input textarea ').on('input', function() {
  var txt = $(this).val();
  if (txt) {
    $(this).addClass('filled-input');
  } else {
    $(this).removeClass('filled-input');
  }
})

$('.styled-form select').on('change', function(){
	var selVal = $(this).val();
	$(this).parent().find('.dropdown-result').html(selVal);
});