V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
Tumblr
V2EX  ›  CSS

如何用纯 CSS 自定义下拉菜单呢?

  •  
  •   Tumblr ·
    tumblr · 2019-04-30 11:19:42 +08:00 · 661 次点击
    这是一个创建于 2034 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用了 Windows 10 和 Chrome 的暗色模式,用了 V2EX 的暗色模式,那 V2EX plus 如果不是暗色总是不协调的,于是自己改了下 options.css , 那么,问题来了。。。有这么一段:

    <div class="item-secondary dropdownMenu">
        <select name="customNode" id="customNode">
            <option value="www">国内 1 (默认)</option>
            <option value="fast">国内 2</option>
            <option value="sjc">美国 1</option>
            <option value="uk">美国 2</option>
            <option value="jp">日本</option>
            <option value="neue">全球 1</option>
            <option value="lax">全球 2</option>
            <option value="-1">关闭</option>
        </select>
    </div>
    

    然后查看 CSS 文件,是这么写的:

    .item > .dropdownMenu {
      width: auto;
      display: flex;
      align-items: center;
      -webkit-margin-end: 1.6rem;
    }
    
    .item > .dropdownMenu > select {
      width: 10rem;
      -webkit-appearance: none;
      border: none;
      border-bottom: 1px solid #E0E0E0;
      outline: none;
      padding-bottom: 4px;
      -webkit-padding-start: 5px;
      background: url(data:_image_base64_) center right no-repeat;
      background-size: 0.7em;
      font-family: inherit;
      font-size: inherit;
    }
    

    改来改去,除了下拉的候选列表,其它的都改成自己期望的颜色了:

    那么,这个下拉列表里,怎么用纯 CSS 把颜色也改一下呢?


    附相关信息: 暗色主题:

    @import url("//jkjoke.b0.upaiyun.com/css/v2ex-dark.css"); 
    /*@import url("//jkjoke.b0.upaiyun.com/css/v2ex.css");*/
    

    v2ex plus source code: v2ex plus@github

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2465 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 00:18 · PVG 08:18 · LAX 16:18 · JFK 19:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.