#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    126
    Rep Power
    9

    Display selected item in colour


    I have written some code (in php) to select an item from a list ("combo box") that I have retrieved from a database. On reloading the page, dependant on the item selected, I then want to display the selected item in a new "combo box" with the appropriate colour. So, in essence, I am trying to display the selected item in a colour. I have some css code to define the colour. In principle, my code is as follows and I would appreciate any help as to how to display the selected item in the colour noted. It currently displays in black (the css definiton for main_body_AGM). In this example I am trying to display it in red.

    Code:
    <select name = "extras" >
    <option  style = main_body_AGM_red selected >please select your name from the list</option>
    <option class= main_body_AGM_red  >this is the first</option>
    <option class= main_body_AGM  >this is the second</option>
    <option class= main_body_AGM_red  >this is the third</option>
    <option class= main_body_AGM  >this is the fourth</option>
    </select>
  2. #2
  3. Not An Expert
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2015
    Posts
    404
    Rep Power
    3
    For reference to those coming to this thread fresh, this is a branch off of a PHP discussion here: Display selected value in colour
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    126
    Rep Power
    9
    Okay - I have found the error in my code. The colour declaration needs to be in the <select> statement and not the <option selected></option> statement. I have tested this in php as well and it works. Thank you.

    Code:
    <select name = "extras" class= main_body_AGM_red   >
    <option  selected >please select your name from the list</option>
    <option class= main_body_AGM_red  >this is the first</option>
    <option class= main_body_AGM  >this is the second</option>
    <option class= main_body_AGM_red  >this is the third</option>
    <option class= main_body_AGM  >this is the fourth</option>
    </select>
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2017
    Location
    Ahmedabad
    Posts
    17
    Rep Power
    0
    Hi

    Code:
    <html>
    <head>
    <title></title>
    
    <style>
    select { border:0; color:#EEE; background:transparent;
    font-size:20px; font-weight:bold; padding:2px 10px; width:378px;
    *width:350px; *background:#58B14C; -webkit-appearance: none; }
    
    #mainselection { overflow:hidden; width:350px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border-radius: 9px 9px 9px 9px;
    box-shadow: 1px 1px 11px #330033;
    background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C; 
    }
    </style>
    
    </head>
    <body>
    
        <div id="mainselection">
        <select>
        <option>Select an Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        </select>
        </div>
    </body>
    </html>
    Thanks!

IMN logo majestic logo threadwatch logo seochat tools logo