发表新帖
发表新帖

html select with different background color for every option that works properly in every browser?

后端 未结
关注
5 1134
青春惊慌失措
青春惊慌失措 2020-12-19 04:20

I am looking to build multiple html select elements with custom background colors for each option:
提交评论
  •  加载中...
  • 既然无缘
    2020-12-19 05:00 
    <select>
<option  value="AliceBlue">AliceBlue</option>
<option  value="AntiqueWhite">AntiqueWhite</option>
<option  value="Aqua">Aqua</option>
<option  value="Aquamarine">Aquamarine</option>
<option  value="Azure">Azure</option>
<option  value="Beige">Beige</option>
<option  value="Bisque">Bisque</option>
<option  value="Black">Black</option>
<option  value="BlanchedAlmond">BlanchedAlmond</option>
<option  value="Blue">Blue</option>
<option  value="BlueViolet">BlueViolet</option>
<option  value="Brown">Brown</option>
<option  value="BurlyWood">BurlyWood</option>
<option  value="CadetBlue">CadetBlue</option>
<option  value="Chartreuse">Chartreuse</option>
<option  value="Chocolate">Chocolate</option>
<option  value="Color">Color</option>
<option  value="Coral">Coral</option>
<option  value="CornflowerBlue">CornflowerBlue</option>
<option  value="Cornsilk">Cornsilk</option>
<option  value="Crimson">Crimson</option>
<option  value="Cyan">Cyan</option>
<option  value="DarkBlue">DarkBlue</option>
<option  value="DarkCyan">DarkCyan</option>
<option  value="DarkGoldenrod">DarkGoldenrod</option>
<option  value="DarkGray">DarkGray</option>
<option  value="DarkGreen">DarkGreen</option>
<option  value="DarkKhaki">DarkKhaki</option>
<option  value="DarkMagenta">DarkMagenta</option>
<option  value="DarkOliveGreen">DarkOliveGreen</option>
<option  value="DarkOrange">DarkOrange</option>
<option  value="DarkOrchid">DarkOrchid</option>
<option  value="DarkRed">DarkRed</option>
<option  value="DarkSalmon">DarkSalmon</option>
<option  value="DarkSeaGreen">DarkSeaGreen</option>
<option  value="DarkSlateBlue">DarkSlateBlue</option>
<option  value="DarkSlateGray">DarkSlateGray</option>
<option  value="DarkTurquoise">DarkTurquoise</option>
<option  value="DarkViolet">DarkViolet</option>
<option  value="DeepPink">DeepPink</option>
<option  value="DeepSkyBlue">DeepSkyBlue</option>
<option  value="DimGray">DimGray</option>
<option  value="DodgerBlue">DodgerBlue</option>
<option  value="FireBrick">FireBrick</option>
<option  value="FloralWhite">FloralWhite</option>
<option  value="ForestGreen">ForestGreen</option>
<option  value="Fuchsia">Fuchsia</option>
<option  value="Gainsboro">Gainsboro</option>
<option  value="GhostWhite">GhostWhite</option>
<option  value="Gold">Gold</option>
<option  value="Goldenrod">Goldenrod</option>
<option  value="Gray">Gray</option>
<option  value="Green">Green</option>
<option  value="GreenYellow">GreenYellow</option>
<option  value="Honeydew">Honeydew</option>
<option  value="HotPink">HotPink</option>
<option  value="IndianRed">IndianRed</option>
<option  value="Indigo">Indigo</option>
<option  value="Ivory">Ivory</option>
<option  value="Khaki">Khaki</option>
<option  value="Lavender">Lavender</option>
<option  value="LavenderBlush">LavenderBlush</option>
<option  value="LawnGreen">LawnGreen</option>
<option  value="LemonChiffon">LemonChiffon</option>
<option  value="LightBlue">LightBlue</option>
<option  value="LightCoral">LightCoral</option>
<option  value="LightCyan">LightCyan</option>
<option  value="LightGoldenrodYellow">LightGoldenrodYellow</option>
<option  value="LightGreen">LightGreen</option>
<option  value="LightGrey">LightGrey</option>
<option  value="LightPink">LightPink</option>
<option  value="LightSalmon">LightSalmon</option>
<option  value="LightSeaGreen">LightSeaGreen</option>
<option  value="LightSkyBlue">LightSkyBlue</option>
<option  value="LightSlateGray">LightSlateGray</option>
<option  value="LightSteelBlue">LightSteelBlue</option>
<option  value="LightYellow">LightYellow</option>
<option  value="Lime">Lime</option>
<option  value="LimeGreen">LimeGreen</option>
<option  value="Linen">Linen</option>
<option  value="Magenta">Magenta</option>
<option  value="Maroon">Maroon</option>
<option  value="MediumAquamarine">MediumAquamarine</option>
<option  value="MediumBlue">MediumBlue</option>
<option  value="MediumOrchid">MediumOrchid</option>
<option  value="MediumPurple">MediumPurple</option>
<option  value="MediumSeaGreen">MediumSeaGreen</option>
<option  value="MediumSlateBlue">MediumSlateBlue</option>
<option  value="MediumSpringGreen">MediumSpringGreen</option>
<option  value="MediumTurquoise">MediumTurquoise</option>
<option  value="MediumVioletRed">MediumVioletRed</option>
<option  value="MidnightBlue">MidnightBlue</option>
<option  value="MintCream">MintCream</option>
<option  value="MistyRose">MistyRose</option>
<option  value="Moccasin">Moccasin</option>
<option  value="NavajoWhite">NavajoWhite</option>
<option  value="Navy">Navy</option>
<option  value="OldLace">OldLace</option>
<option  value="Olive">Olive</option>
<option  value="OliveDrab">OliveDrab</option>
<option  value="Orange">Orange</option>
<option  value="OrangeRed">OrangeRed</option>
<option  value="Orchid">Orchid</option>
<option  value="PaleGoldenrod">PaleGoldenrod</option>
<option  value="PaleGreen">PaleGreen</option>
<option  value="PaleTurquoise">PaleTurquoise</option>
<option  value="PaleVioletRed">PaleVioletRed</option>
<option  value="PapayaWhip">PapayaWhip</option>
<option  value="PeachPuff">PeachPuff</option>
<option  value="Peru">Peru</option>
<option  value="Pink">Pink</option>
<option  value="Plum">Plum</option>
<option  value="PowderBlue">PowderBlue</option>
<option  value="Purple">Purple</option>
<option  value="Red">Red</option>
<option  value="RosyBrown">RosyBrown</option>
<option  value="RoyalBlue">RoyalBlue</option>
<option  value="SaddleBrown">SaddleBrown</option>
<option  value="Salmon">Salmon</option>
<option  value="SandyBrown">SandyBrown</option>
<option  value="SeaGreen">SeaGreen</option>
<option  value="Seashell">Seashell</option>
<option  value="Sienna">Sienna</option>
<option  value="Silver">Silver</option>
<option  value="SkyBlue">SkyBlue</option>
<option  value="SlateBlue">SlateBlue</option>
<option  value="SlateGray">SlateGray</option>
<option  value="Snow">Snow</option>
<option  value="SpringGreen">SpringGreen</option>
<option  value="SteelBlue">SteelBlue</option>
<option  value="Tan">Tan</option>
<option  value="Teal">Teal</option>
<option  value="Thistle">Thistle</option>
<option  value="Tomato">Tomato</option>
<option  value="Turquoise">Turquoise</option>
<option  value="Violet">Violet</option>
<option  value="Wheat">Wheat</option>
<option  value="White">White</option>
<option  value="WhiteSmoke">WhiteSmoke</option>
<option  value="Yellow">Yellow</option>
<option  value="YellowGreen">YellowGreen</option>
</select>
    0 讨论(0)
  • 被撕碎了的回忆
    2020-12-19 05:11

    Please have a look at the following jsfiddle

    http://jsfiddle.net/xt3xv/1/

    <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<select runat="server" id="select">
    <option value="A" style="background-color: white;">White</option>
    <option value="B" style="background-color: red;">Red</option>
    <option value="C" style="background-color: yellow;">Yellow</option>
    <option value="D" style="background-color: green;">Green</option>
</select>
<script>
$('#select').change(function(){
      if($(this).val() == 'A'){
        $("body").css('background-color', 'white');
      }
        if($(this).val() == 'B'){
        $("body").css('background-color', 'red');
      }
        if($(this).val() == 'C'){
        $("body").css('background-color', 'yellow');
      }
        if($(this).val() == 'D'){
        $("body").css('background-color', 'green');
      }
    });
</script>
</body>
</html>
    0 讨论(0)
  • 温柔的废话
    2020-12-19 05:13 
       <script>

   function changecolor(id,color){

  id.style.backgroundColor=color;


 }
  </script>


    <div id="container">

     <p> Select Color to change background:</p>


    <select id="themenu" onchange="changecolor(container,value)">
   <option value="white"> </option>
   <option value="red">RED</option>
   <option value="blue">BLUE</option>
   <option value="green">GREEN</option>
   </select>


   </div>
    0 讨论(0)
  • 情话喂你
    2020-12-19 05:15

    This is pretty much the same as @Singh with some minor changes to make it a little more flexible, it allows you to have multiple selects change colours.

    CSS

    <style>
    .red {
        color: darkred;
        background-color: red;
    }

    .purple {
        color: darkmagenta;
        background-color: magenta;
    }

    .yellow {
        color: darkkhaki;
        background-color: yellow;
    }

    .aqua {
        color: mediumaquamarine;
        background-color: aqua;
    }

    .blue {
        color: lightblue;
        background-color: blue;
    }

    .green {
        color: lightgreen;
        background-color: green;
    }
</style>

    html

    <select name="pos1" id="pos1" onchange="colourFunction(this)">
    <option disabled selected value>select</option>
    <option class="red" value="1">Red</option>
    <option class="purple" value="2">Purple</option>
    <option class="yellow" value="3">Yellow</option>
    <option class="aqua" value="4">Aqua</option>
    <option class="blue" value="5">Blue</option>
    <option class="green" value="6">Green</option>
</select>

<select name="pos2" id="pos2" onchange="colourFunction(this)">
    <option disabled selected value>select</option>
    <option class="red" value="1">Red</option>
    <option class="purple" value="2">Purple</option>
    <option class="yellow" value="3">Yellow</option>
    <option class="aqua" value="4">Aqua</option>
    <option class="blue" value="5">Blue</option>
    <option class="green" value="6">Green</option>
</select>

    JS

    <script>
    function colourFunction(pos) {
        pos.className = pos[pos.selectedIndex].className;
        pos.blur();
    }
</script>
    0 讨论(0)
    •  看不清?
    提交回复
    热议问题