相关疑难解决方法(0)

我正在尝试select使用CSS3 设置元素样式.我在WebKit(Chrome/Safari)中获得了我想要的结果,但Firefox并没有很好地发挥(我甚至不打扰IE).我正在使用CSS3 appearance属性,但出于某种原因,我无法摆脱Firefox中的下拉图标.

这是我正在做的一个例子:http://jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

正如你所看到的,我并没有尝试任何花哨的东西.我只想删除默认样式并添加我自己的下拉箭头.就像我说的,伟大的WebKit,在Firefox中不是很好.显然,-moz-appearance: none没有摆脱下拉项目.

有任何想法吗？不,JavaScript不是一个选项

我有选择元素,我想删除箭头,然后我可以添加其他图标..我可以为Firefox Safari和Chrome做到这一点,但这在IE9上不起作用.

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

查阅小提琴上的IE9.所有我需要的是移除ie9中的箭头请JSFIDDLE回答.

我使用下面的CSS来隐藏FF,safari,chrome中的下拉箭头,并添加了我自己的图像来自定义.

select 
{
  -webkit-appearance:none;
  -moz-appearance:none;
  -o-appearance:none;
   appearance:none; 
}

对于IE10,我使用了伪元素

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

我不知道如何为IE9和IE8应用相同的内容.任何人都可以告诉我如何隐藏IE8和IE9中的下拉箭头.

DEMO

我试过css appearance: none;来隐藏选择下拉箭头.但在IE9箭头显示.供参考,请参阅图像.

知道如何使用css或jquery隐藏箭头吗？

这是我的代码:

    .fields-set select{
height:32px;
border:1px solid #ccc;
margin: 0 19px 0 1%;
padding:0 32px 0 1%;
width:55%;
float: left;
overflow: hidden;
background:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR3xT6PSVebCcTYjggESCb55GBM91fGgbyrMFbs3CGeFoQjFwVB") no-repeat scroll right center padding-box border-box #FFF;
box-shadow: none;
-webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
    -ms-appearance: none  \9;
     -o-appearance: none;
    }

有没有一种好方法隐藏所有浏览器的默认下拉箭头？我知道这个问题已经被问过几次了，但似乎没有一个适用于所有浏览器的解决方案，而且它们看起来都不太好。几年过去了，不知道现在有没有好的解决方案？

如何删除 select 中那个看起来很可怕的双箭头？ 我发现的关于这篇文章的任何其他回答都不起作用。

    <div class="form-group">
      <label for="date">Date</label>
      <div class"row">
        <div class="col-5">
          <input.....>
        </div>
        <div class="col-7">
          <div class="input-group">
            <select class="custom-select">
              <option.....>
            </select>
          </div>
        </div>
      </div>
    </div>

图片：

我尝试了这些解决方案：

• 如何删除 Bootstrap 4 下拉菜单中的箭头？
• 从 Bootstrap 3 中的表单元素选择中删除箭头
• 选择移除下拉箭头
• 如何在boostrap中替换箭头下拉选择
• 更改下拉箭头的颜色和外观

但不起作用。

我使用默认的HTML5示例代码行:我使用了自定义背景.我想删除右侧出现的黑色箭头.

图像显示出现的黑色箭头.需要它删除它.我尝试了很多css技巧,但没有奏效.

示例代码

我正在使用 vuejs 和 tailwindcss。如何从 HTML select 元素中删除默认箭头？我已经尝试过用 css 删除外观：

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

以及顺风的appearance-none

<select :onchange="selectChanged()"
            class="bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none" ref=" eventSelect">

我当前的模板代码：

<template>
    <div>
        <select :onchange="selectChanged()"
            class="bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none" ref=" eventSelect">
            <option class="bg-slate-800">50m </option>
            <option class="bg-slate-800"> 60m </option>
            <option class="bg-slate-800"> 100m </option>
            <option class="bg-slate-800"> 300m </option>
        </select>
    </div>
</template>

它看起来像这样：

由于某种原因我似乎无法将其删除:(