1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help with styling a drop-down box

Discussion in 'CSS' started by chrisj, Nov 10, 2014.

  1. #1
    I have this code (below) and I'd like to replace the 'blue' color (see attached image), can you help me with that?
    
    input, select {
    font-family:Arial, Helvetica, sans-serif;
    }
    
    input,select{
    width:100px;
    height: 40px;
    color:#cccccc;
    border:1px solid #cccccc;
    background: #ffffff;
    }
    
    input:focus,select:focus{background:red}
    
    Code (CSS):
    <form method="get" action="../search1.php">
    <select size="1" name="type" />
    <option value="1">CHANNEL 1</option>
    <option value="2">CHANNEL 2</option>
    <option value="any string here">ALL</option>
    </select>
    <input autocomplete="off" id="keyword" name="keyword" value="Search [var.site_name]" onclick="clickclear(this, 'Enter Search Words')"   onblur="clickrecall(this,'Enter Search Words')"  />
    <input type="submit" value="VIEW" />
    </form>
    HTML:

    SEMrush
     

    Attached Files:

    chrisj, Nov 10, 2014 IP
    SEMrush
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    You are not going to do it with CSS. I think you might manage it with scripting for the change event of the select with
    <select onchange="this.options[this.selectedIndex].style.backgroundColor:'#ff0000';"
    Code (markup):
    I don't guarantee it will actually let you change it cross-browser/device/os but it is probably your best shot.
     
    COBOLdinosaur, Nov 12, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #3
    Styling things like form elements is a nightmare across different browsers; OFFICIALLY you aren't supposed to be able to do it at all because it's usability and accessibility rubbish. SOME browsers (Firefox and other Nyetscape legacy) will let you set style on the OPTION tags, but you can't rely on it working in any other browsers.

    Though it might help if you had a properly formed form and axed the scripttardery that is creating "false simplicy" just to avoid making room for a LABEL. Just as "Placeholder is not a substitute for LABEL", neither is dicking around hiding/showing what should be your LABEL inside the input.

    No matter how many artsy fartsy "designers" Photoshop jockeys who don't know **** about **** when it comes to accessibility and usability might try to tell you otherwise.
     
    deathshadow, Nov 14, 2014 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #4
    Though (not to backpedal) I've been playing with an interesting.. idea on handling selects... by using radio buttons and their labels instead of options. When/if I get a working example I'll post it up here. It's nice because it's a HTML/CSS only solution -- no scripting needed.
     
    deathshadow, Nov 15, 2014 IP
    COBOLdinosaur likes this.
  5. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #5
    Now you have my interest. A no script solution would make my day. :)
     
    COBOLdinosaur, Nov 15, 2014 IP
  6. Naina S

    Naina S Active Member

    Messages:
    203
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    93
    #6
    just put a css in your select and use it in your css.
    <select css="selectCss">
    ...
    ....
    </select>


    .selectCss
    {
    color:blue;
    }
     
    Naina S, Nov 27, 2014 IP
  7. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #7
    @Naina S
    Are you inventing your own attributes? Or do you think that actually exists?
     
    COBOLdinosaur, Nov 28, 2014 IP
    deathshadow likes this.