CSS 选择箭头样式更改

Question

提问by user1802439

I'm trying to replace the arrow of a select with a picture of my own. I'm including the select in a div with the same size, I set the background of the select as transparent and I'm including a picture(with the same size as the arrow) in the right top corner of the div as background.

我正在尝试用我自己的图片替换选择的箭头。我将选择包含在具有相同大小的 div 中，我将选择的背景设置为透明，并在 div 的右上角包含一张图片（与箭头大小相同）作为背景。

It only works in Chrome.

它仅适用于 Chrome。

enter image description here

在此处输入图片说明

How can I make it work in Firefox and IE9 where I'm getting this:

我怎样才能让它在 Firefox 和 IE9 中工作，我得到这个：

enter image description here

在此处输入图片说明

.styled-select {
  width: 100px;
  height: 17px;
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  background: url(images/downarrow_blue.png) no-repeat right white;
  border: 2px double red;
  display: inline-block;
  position: relative;
}

.styled-select select {
  background: transparent;
  -webkit-appearance: none;
  width: 100px;
  font-size: 11px;
  border: 0;
  height: 17px;
  position: absolute;
  left: 0;
  top: 0;
}

body {
  background-color: #333333;
  color: #FFFFFF;
}

.block label {
  color: white;
}

<HTML>

<HEAD>
</HEAD>

<BODY>
  <p/>
  <form action="/prepareUpdateCategoryList.do?forwardto=search">

    <fieldset class="block" id="searchBlock">
      <p>
        <label style="width:80px">Class</label>
        <div class="styled-select">
          <select property="voucherCategoryClass">
      <option value="0">Select </option>
      <option value="7382">steam </option>
     </select>
        </div>

      </p>
    </fieldset>
  </form>
</BODY>

</HTML>

Answer 1

回答by Morpheus

Have you tried something like this:

你有没有尝试过这样的事情：

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

Haven't tested, but should work.

还没有测试，但应该工作。

EDIT: It looks like Firefox doesn't support this feature up until version 35 (read more here)

编辑：看起来 Firefox 直到版本 35 才支持此功能（在此处阅读更多内容）

There is a workaround here, take a look at jsfiddleon that post.

有一种变通方法这里，看看jsfiddle该讯息。

Answer 2

回答by svnm

I have set up a selectwith a custom arrow similar to Julio's answer, however it doesn't have a set width and uses an svgas a background image. (arrow_drop_downfrom material-ui icons)

我已经设置了一个select类似于 Julio 答案的自定义箭头，但是它没有设置宽度并使用一个svg作为背景图像。（arrow_drop_down来自 material-ui 图标）

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-right: 2rem;
  padding: 1rem;
  padding-right: 2rem;
}

If you need it to also work in IE update the svg arrow to base64 and add the following:

如果您需要它也能在 IE 中工作，请将 svg 箭头更新为 base64 并添加以下内容：

select::-ms-expand { display: none; }

background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);

To make it easier to size and space the arrow, use this svg:

为了更轻松地调整箭头的大小和间距，请使用此 svg：

url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>");

It doesn't have any spacing on the arrow's sides.

它在箭头的两侧没有任何间距。

Answer 3

回答by Julio Marins

Working with just one class:

只使用一个类：

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-position-x: 244px;
}

http://jsfiddle.net/qhCsJ/4120/

Answer 4

回答by Peter Drinnan

Here is an elegant fix that uses a span to show the value.

这是一个优雅的修复，它使用跨度来显示值。

Layout is like this:

布局是这样的：

<div class="selectDiv">
   <span class="selectDefault"></span>
   <select name="txtCountry" class="selectBox">
      <option class="defualt-text">-- Select Country --</option>
      <option value="1">Abkhazia</option>
      <option value="2">Afghanistan</option>
   </select>
</div>

JsFiddle

提琴手

Answer 5

回答by Siavas

This would work well especially for those using Bootstrap, tested in latest browser versions:

这对于那些使用 Bootstrap 的人来说效果很好，在最新的浏览器版本中进行了测试：

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Some browsers will not display the caret when using calc, so we put the fallback first */ 
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */
}
/*For IE*/
select::-ms-expand { display: none; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <select class="form-control">
       <option>Option 1</option>
       <option>Option 2</option>
       <option>Option 3</option>
      </select>
    </div>
  </div>
</div>

Answer 6

回答by sunilkjt

Check this one It's hacky, simple as that:

检查这个它很hacky，就这么简单：

Set -prefix-appearanceto noneto remove the styles
Use text-indentto "push" the content a bit to the right
Finally, set text-overflowto an empty string. Everything that extends beyond it's width will become... nothing! And that includes the arrow.

设置-prefix-appearance要none删除的样式
用于text-indent将内容“推”到右侧
最后，设置text-overflow为空字符串。任何超出其宽度的东西都会变成……什么都没有！这包括箭头。

Now you're free to style it any way you want :)

现在你可以自由地以任何你想要的方式来设计它:)

.selectParent {
  width: 80px;
  overflow: hidden;
}

.selectParent select {
  text-indent: 1px;
  text-overflow: '';
  width: 100px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 2px 2px 2px 2px;
  border: none;
  background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 60px center;
}

<div class="selectParent">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
</div>

View on JSFiddle

在 JSFiddle 上查看

Answer 7

回答by kishan Radadiya

It's working in all browser:

它适用于所有浏览器：

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    background-position-x: 244px;

}

Answer 8

回答by Dario Corno

Style the label with CSS and use pointer events :

使用 CSS 设置标签样式并使用指针事件：

<label>
<select>
   <option value="0">Zero</option>
   <option value="1">One</option>
</select>
</label>

and the relative CSS is

相对的 CSS 是

label:after {
    content:'BC';
    display:inline-block;
    color:#000;
    background-color:#fff;
    margin-left:-17px;   /* remove the damn :after space */
    pointer-events:none; /* let the click pass trough */
}

I just used a down arrow here, but you can set a block with a background image. Here is a ugly fiddle sample: https://jsfiddle.net/1rofzz89/

我只是在这里使用了向下箭头，但您可以设置带有背景图像的块。这是一个丑陋的小提琴样本：https: //jsfiddle.net/1rofzz89/

Answer 9

回答by Maverick09

I have referred this post, it worked like charm , except it did not hide the arrow in IE browser.

我已经提到了这篇文章，它的作用就像魅力一样，只是它没有隐藏 IE 浏览器中的箭头。

However adding following hides the arrow in IE:

但是添加以下内容会隐藏 IE 中的箭头：

&::-ms-expand {
      display: none;
    }

Complete solution ( sass )

完整的解决方案（sass）

$select-border-color: #ccc;
$select-focus-color: green;

select {

    cursor: pointer;
    /* styling */
    background-color: white;
    border: 1px solid $select-border-color;
    border-radius: 4px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;

    /* reset */
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: linear-gradient(45deg, transparent 50%, $select-border-color 50%),
    linear-gradient(135deg, $select-border-color 50%, transparent 50%),
    linear-gradient(to right, $select-border-color, $select-border-color);
    background-position: calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;

    /* Very imp: hide arrow in IE */
    &::-ms-expand {
      display: none;
    }

    &:-moz-focusring {
      color: transparent;
      text-shadow: none;
    }

    &:focus {
      background-image: linear-gradient(45deg, $select-focus-color 50%, transparent 50%),
      linear-gradient(135deg, transparent 50%, $select-focus-color 50%), linear-gradient(to right, $select-focus-color, $select-focus-color);
      background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em;
      background-size: 5px 5px, 5px 5px, 1px 1.5em;
      background-repeat: no-repeat;
      border-color: $select-focus-color;
      outline: 0;
    }
  }

Answer 10

回答by AdroitSJ

Assume, selectDrop is the class present in your HTML tag.So, this much of code is enough to change default arrow icon:

假设， selectDrop 是您的 HTML 标签中存在的类。因此，这些代码足以更改默认箭头图标：

.selectDrop{
      background: url(../images/icn-down-arrow-light.png) no-repeat right #ddd; /*To change default icon with provided image*/
      -webkit-appearance:none; /*For hiding default pointer of drop-down on Chrome*/
      -moz-appearance:none; /*For hiding default pointer of drop-down on Mozilla*/
      background-position-x: 90%; /*Adjust according to width of dropdown*/
    }

CSS 选择箭头样式更改

提问by user1802439

回答by Morpheus

回答by svnm

回答by Julio Marins

回答by Peter Drinnan

回答by Siavas

回答by sunilkjt

回答by kishan Radadiya

回答by Dario Corno

回答by Maverick09

回答by AdroitSJ

相关推荐

最近更新

标签

CSS 选择箭头样式更改

提问by user1802439

回答by Morpheus

回答by svnm

回答by Julio Marins

回答by Peter Drinnan

回答by Siavas

回答by sunilkjt

回答by kishan Radadiya

回答by Dario Corno

回答by Maverick09

回答by AdroitSJ

相关推荐

CSS HTML 属性中的 JSTL if 语句

CSS 属性边框颜色不起作用

什么是 style.css?ver=1 标签？

CSS 向 TinyMCE 字体选项添加新字体

相关推荐

最近更新

标签