Combo box with colors

Question

Combo box with colors

Navigation

#1 by (1 votes)

-1

I wanted to make a genre of a semaphore, I have a combo box with 3 options: I liked that each of them had a ball in front with a color (Green, Orange / Yellow, Red), to make identification easier. Do not forget that the ball only appears if you have any items selected 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

asked by anonymous 23.06.2016 / 12:17

1 answer

Simulate the operation of a processor using java swing Erase rows in multiple tables

score 1 · Answer 1

Frames, the tag <select> and <option> allow few changes, either through markup html or using CSS , and when allowed, there is a lot that is not cross-browser .

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

Let's 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 javaScript:

$('#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> has been translated to <div> and you can edit div with some freedom.