Combo box with colors

Asked

Viewed 511 times

-1

I wanted to do a kind of a traffic light, I have a combo box with 3 options: I would like each of them to have a ball in front with a color (Green, Orange/Yellow, Red), so that it is easier to identify. Do not forget that the ball only appears if you have a selected item and that each ball corresponds to an item.

<tr>
  <td>Estado:</td >
  <td> 
    <select name="estado"> 
      <?php while($registo=mysql_fetch_array($consultaEstado)) { ?> 
      <option SelectedIndex = "5" value="<?php echo utf8_encode($registo['id_estado']); ?>">
        <?php echo utf8_encode($registo['tipo_estado']); ?>
      </option> 
      <?php } ?> 
    </select> 
  </td> 
  <td></td> 
</tr>
html css

  • I already got the combobox done, just really wanted that part of the colors

  • So show me what you’ve done.

  • Use CSS and you can try <input style="background-color: red;" .....> and a green color is Lime, red is red, orange is Orange and yellow is Yellow.

1 answer

1

Marcos, the tag <select> and <option> allow few alternations, either through Markup html or using CSS, and when it does, there’s a lot that’s not cross-browser.

If you really need to customize your select, you will have to hide the same and through the javaScript create a structure that simulates the same.

let’s use as default the plugin Selectize.js, by declaring the following Markup.:

<select id="select-beast" placeholder="Select a person...">  
  <option value="" selected="selected"></option>
  <option value="1">Chuck Testa</option>
  <option value="3">Nikola Tesla</option>
  <option value="4">Sage Cattabriga-Alosa</option>
</select>

and make the following call in Java:

$('#select-beast').selectize({
    create: true,
    sortField: 'text'
});

it will generate the following markut in your HTML.:

<select id="select-beast" placeholder="Select a person..." style="display: none;">  
  <option value="" selected="selected"></option>
  <option value="1">Chuck Testa</option>
  <option value="3">Nikola Tesla</option>
  <option value="4">Sage Cattabriga-Alosa</option>
</select>
<div class="selectize-control demo-default single">
  <div class="selectize-input items not-full has-options">
    <input type="text" autocomplete="off" tabindex="" placeholder="Select a person..." style="width: 103px; opacity: 1; position: relative; left: 0px;">
  </div>
  <div class="selectize-dropdown single demo-default" style="display: none; width: 520px; top: 36px; left: 0px; visibility: visible;">
    <div class="selectize-dropdown-content">
      <div data-value="1" data-selectable="" class="option">Chuck Testa</div>
      <div data-value="3" data-selectable="" class="option">Nikola Tesla</div>
      <div data-value="4" data-selectable="" class="option">Sage Cattabriga-Alosa</div>
    </div>
  </div>
</div>

note that in this case, your <option> was translated to a <div> and you can edit the div with some freedom.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.