CODEWITHSUNDEEP
jqueryselect
Johnny G.
Johnny G.

Reputation: 525

Styling the color of individual option elements within a select tag

Is there a way to change the color of the first option "Select" as red, and the rest of the options as green?

So far, toggleClass allows me to change between colors, but I want the color to change red whenever the user clicks on "Select", and green whenever someone clicks on the rest of the options (i.e. "Service-One, Service-Two", etc).

HTML:

  <div class="field">
    <label>Service</label>
    <select id="select">
      <option>Select</option>
      <optgroup label="Type of Service">
        <option>Service-One</option>
        <option>Service-Two</option>
      </optgroup>
      <optgroup label="Type of Service">
        <option>Service-Three</option>
        <option>Service-Four</option>
      </optgroup>
    </select>
  </div>

Here's my jQuery:

$("select").each(function(){
    $(this).toggleClass('success-select');
});

Here's my codePen: http://codepen.io/johnnyginbound/pen/MYmaaz

Upvotes: 2

Views: 1035

Answers (1)

Banana
Banana

Reputation: 7463

just check whats the select value when its changed. you can even add a failure class:

//first color all the options:
$('#select option').css({
  "color":"green"
});
//color group names gray:
$('#select optgroup').css({
  "color":"#555555"
});
//color first option red:
$('#select option').eq(0).css({
  "color":"red"
});
//attach a handler to fire when select value is changed
$('#select').change(function(){
  if($(this).val()==="Select"){
      $(this).removeClass("success-select");
    $(this).addClass("failure-select");
  }
  else{
    $(this).removeClass("failure-select");
      $(this).addClass("success-select");
  }
});
form {
  margin: 7em auto;
  width: 30%;
  font-family: 'Helvetica';
}

div.field {
  padding-top: 2em;
  border-bottom: 1px solid black;
}
button {
  margin: 2em auto;
  width: 100%;
  padding: 1em;
  cursor: pointer;
  background: none;
}
button:hover {
  background-color: #444444;
  color: #fff;
}

label {
  display: none;
}

input,
select {
  outline: none;
  border: none;
  width: 100%;
  background: none;
}
select {
  color: red;
}
.success-select {
  color: green;
}

select:focus {
  outline: none; 
  border: none;

}
input {
  margin-bottom: 10px;
}
/* Styling the placeholders */
input::-webkit-input-placeholder {
  color: #2f3238;
  font-weight: bold;
}
.failure-select{
  font-weight:bold;
  -webkit-animation: blinkRed 500ms 3;
  animation: blinkRed 500ms 3;
}
@keyframes blinkRed{
  0%{
    color:black;
  }
  50%{
    color:red;
  }
  100%{
    color:black;
  }
}
@-webkit-keyframes blinkRed{
  0%{
    color:black;
  }
  50%{
    color:red;
  }
  100%{
    color:black;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span><a href="http://ryanscherf.net">Ryan Scherf's</a> contact form served as inspiration- so I decided to recreate it with a small jquery update on the select tag.</span>

<form>
  <div class="field">
    <label>Name</label>
    <input type="text" placeholder="Name" class="name-field">
  </div>
  
  <div class="field">
    <label>Email</label>
    <input type="text" placeholder="Email" class="email-field">
  </div>

  <div class="field">
    <label>Service</label>
    <select id="select">
      <option>Select</option>
      <optgroup label="Type of Service">
        <option>Service-One</option>
        <option>Service-Two</option>
      </optgroup>
      <optgroup label="Type of Service">
        <option>Service-Three</option>
        <option>Service-Four</option>
      </optgroup>
    </select>
  </div>

  <div class="field">
    <label>Project Description</label>
    <input type="text" placeholder="Project Description" class="project-field">
  </div> 
  <button>Submit</button>
</form>

Upvotes: 1

Related Questions