CSS设置七彩的下拉菜单

最新推荐文章于 2023-04-17 18:13:53 发布

量变决定质变

最新推荐文章于 2023-04-17 18:13:53 发布

阅读量2k

点赞数

分类专栏： ————CSS

本文链接：https://blog.csdn.net/nangeali/article/details/52972652

版权

————CSS 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

CSS设置七彩的下拉菜单

CSS不仅可以控制下拉菜单的整体字体和边框，而且，可以设置每一个选项的背景色和文字颜色。

首先，建立HTML部分，包括表单、下拉菜单、各个选项和按钮等等。

<span style="font-size:24px;"><html>
       <head>
              <title>
                    
              </title>
              <style>
                     <!--
                     -->
              </style>
       </head>
      
       <body>
              <formmethod="post">
                     <p><labelfor="color">Select your favorite color:</label>
                            <selectname="color" id="color">
                                   <optionvalue="">Select One</option>
                                   <optionvalue="blue" class="blue">blue</option>
                                   <optionvalue="red" class="red">red</option>
                                   <optionvalue="green" calss="green">green</option>
                                   <optionvalue="yellow" class="yellow">yellow</option>
                                   <optionvalue="cyan" class="cyan">cyan</option>
                                   <optionvalue="purple" class="purple">purple</option>
                            </select></p>
                     <p><inputtype="submit" name="btnSubmit" id="btnSubmit"value="Send!"></p>               
              </form>
       </body>
</html></span>

此时，给每一个下拉选项添加CSS样式，主要是文字颜色，背景颜色的设置，代码如下：

<span style="font-size:24px;"><html>
       <head>
              <title>
                    
              </title>
              <style>
                     <!--
                     .blue{
                     background-color:#7598fb;
                     color:#000000;
              }
                     .red{
                     background-color:#e20a0a;
                     color:#ffffff;
              }
                     .green{
                     background-color:#3cb371;
                     color:#ffffff;
              }
                     .yellow{
                     background-color:#ffff6f;
                     color:#000000;
              }
                     .cyan{
                     background-color:#00ffff;
                     color:#000000;
              }
                     .purple{
                     background-color:800080;
                     color:#ffffff;
              }
                     -->
              </style>
       </head>
      
       <body>
              <formmethod="post">
                     <p><labelfor="color">Select your favorite color:</label>
                            <selectname="color" id="color">
                                   <optionvalue="">Select One</option>
                                   <optionvalue="blue" class="blue">blue</option>
                                   <optionvalue="red" class="red">red</option>
                                   <optionvalue="green" calss="green">green</option>
                                   <optionvalue="yellow" class="yellow">yellow</option>
                                   <optionvalue="cyan" class="cyan">cyan</option>
                                   <optionvalue="purple" class="purple">purple</option>
                            </select></p>
                     <p><inputtype="submit" name="btnSubmit" id="btnSubmit"value="Send!"></p>               
              </form>
       </body>
</html></span>

可以看到每一项的背景颜色都变成了文字描述的颜色，而且，文字颜色的选取和背景色有一定的反差，以便浏览。