如何将背景色仅作为选择的一部分?的CSS

马吕斯

我有这个样本:

链接

代码HTML:

<div class="select-style">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

代码CSS:

.select-style {
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    width: 120px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    background: #fff url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%;
}

.select-style select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.select-style select:focus {
    outline: none;
}

我放一张照片以更好地了解我想做什么。

在此处输入图片说明

如何在我的结构上执行此操作?

请问目前的结构?还是有其他结构创建了HTML?

提前致谢!

Paran0a

你想要这样的东西吗?

http://codepen.io/anon/pen/bVWmgP

.select-style:after {
          content: '';
          background-color: #000;
          position: absolute;
          border-left: 3px solid #F00;
          z-index: 0;
          top: 0;
          right: 0;
          bottom: 0;
          left: 85px;
        }

    .select-style:before {
        content: '';
        background-color: white;
        position: absolute;
        z-index: -20;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

注意:您将无法更改选择列表箭头的颜色,而无需添加额外的图像来表示该箭头。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何防止背景色隐藏斜体文本的一部分

如何仅将我的精灵图像的一部分重复作为div的背景

如何将一个UIViewController作为屏幕的一部分

如何将 TextureView 作为视图的一部分加载

如何将特定表作为迁移的一部分 - Laravel 5?

XPath仅选择Href的一部分

如何选择一个将数组作为其构造函数一部分的对象?

CSS选择器仅显示第一部分的内容

JavaScript:如何将颜色更改为仅输入字段中字符串的一部分?

如何将行转换为列但仅适用于python中表的一部分?

作为 WSARecvFrom 调用的一部分,如何将缓冲区放入 CompletionROUTINE?

如何将Yocto构建模块fcntl作为Python构建的一部分

如何将函数调用的结果作为dplyr :: mutate的一部分展平?

ZF2:如何将安全图像作为网页的一部分提供

将标题作为CURL的一部分

如何仅绘制视图背景的一部分

仅将输入字段的一部分与CSS一起使用

如何使用 CSS 仅将颜色应用于 SVG 图标的一部分?

Gradle:您如何将自己的库作为构建的一部分?

如何仅解析JSON的一部分?

如何仅编码URL的一部分

如何仅显示图像的一部分

如何仅更改状态的一部分?

如何仅分析图像的一部分?

如何仅渲染Sprite的一部分

如何仅加粗段落的一部分?

如何使用ActiveRecord仅选择存储在Postgres中的json的一部分

如何仅选择Tensorflow数据集的一部分并更改尺寸

如何将JSON作为多部分POST请求的一部分发送