Style Form Elements

In this example below you will see how to do a Style Form Elements with some HTML / CSS and Javascript

This awesome code was written by adamaoc, you can see more from this user in the personal repository.
You can find the original code on
Copyright adamaoc ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Style Form Elements</title>
      <link rel="stylesheet" href="css/style.css">



  <div class="styled-select">
<select class="custom">
  <option>Select this</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>



/*Downloaded from */
.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   padding-left: 15px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   color: #555;

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url( no-repeat right #ddd;
   border: 1px solid #ccc;