Home

Color the background of items in a Dropdown box in your HTML pages.

Submitted by edex on Wed, 06/04/2008 - 04:58.
color.jpg

There are few ways to select color in input form field. Drupal have it's own color picker build in. The draw back with this that it not really user friendly and too technical. Other solution is to use javascrip pop-up menu, but it will not work in all browser.

The solution is to use drop down field with css tweak. It simple and fast.Below is the code taken from pietschsoft.com

<select>
<option value="">Highlight</option>
<option value="#000000" style="background-color: Black;color: #FFFFFF;">Black</option>
<option value="#808080" style="background-color: Gray;">Gray</option>
<option value="#A9A9A9" style="background-color: DarkGray;">DarkGray</option>
<option value="#D3D3D3" style="background-color: LightGrey;">LightGray</option>
<option value="#FFFFFF" style="background-color: White;">White</option>
<option value="#7FFFD4" style="background-color: Aquamarine;">Aquamarine</option>
<option value="#0000FF" style="background-color: Blue;">Blue</option>
<option value="#000080" style="background-color: Navy;color: #FFFFFF;">Navy</option>
<option value="#800080" style="background-color: Purple;color: #FFFFFF;">Purple</option>
<option value="#FF1493" style="background-color: DeepPink;">DeepPink</option>
<option value="#EE82EE" style="background-color: Violet;">Violet</option>
<option value="#FFC0CB" style="background-color: Pink;">Pink</option>
<option value="#006400" style="background-color: DarkGreen;color: #FFFFFF;">DarkGreen</option>
<option value="#008000" style="background-color: Green;color: #FFFFFF;">Green</option>
<option value="#9ACD32" style="background-color: YellowGreen;">YellowGreen</option>
<option value="#FFFF00" style="background-color: Yellow;">Yellow</option>
<option value="#FFA500" style="background-color: Orange;">Orange</option>
<option value="#FF0000" style="background-color: Red;">Red</option>
<option value="#A52A2A" style="background-color: Brown;">Brown</option>
<option value="#DEB887" style="background-color: BurlyWood;">BurlyWood</option>
<option value="#F5F5DC" style="background-color: Beige;">Beige</option>
</select>
Source
pietschsoft
Tags:

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <b> <address> <blockquote> <br> <caption> <center> <code> <dd> <del> <div> <dl> <dt> <em> <font> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <li> <ol> <p> <pre> <span> <strong> <sub> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <u> <ul> <tr>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".
  • Use the special tag [adsense:format:group:channel] or [adsense:block:location] to display Google AdSense ads.

More information about formatting options

To combat spam, please enter the code in the image.

Who's online

There are currently 0 users and 0 guests online.

Sponsor

RSS, XHTML, CSS |

Drupal Themes Design by SEOposition.com