相关疑难解决方法(0)

<select>和:在WebKit中使用CSS后出现问题

我想在一个选择框中添加一些样式,其中包含伪:after(用于选择包含2个部分且没有图像的选择框).这是HTML:

<select name="">
  <option value="">Test</option>
</select>
Run Code Online (Sandbox Code Playgroud)

它不起作用.我不知道为什么,我没有在W3C规范中找到答案.这是CSS:

select {
  -webkit-appearance: none;
  background: black;
  border: none;
  border-radius: 0;
  color: white;
}

select:after {
  content: " ";
  display: inline-block;
  width: 24px; height: 24px;
  background: blue;
}
Run Code Online (Sandbox Code Playgroud)

这是正常还是有诀窍?

html css select

106
推荐指数
8
解决办法
15万
查看次数

选择箭头样式更改

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

它只适用于Chrome.

在此输入图像描述

我怎样才能使它在Firefox和IE9中工作,我得到了这个:

在此输入图像描述

.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;
}
Run Code Online (Sandbox Code Playgroud)
<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 …
Run Code Online (Sandbox Code Playgroud)

css select

104
推荐指数
13
解决办法
40万
查看次数

<select>元素上"向下箭头"的CSS?

是否可以在下拉选择元素上设置向下箭头的样式?即,(<select><option>--></option></select>)

我怀疑答案是否定的,因为IE处理特定元素的方式.如果没有办法,有没有人知道使用javaScript的'假'下拉框会模仿这种行为,但是我能够自定义吗?

html css jquery

36
推荐指数
3
解决办法
17万
查看次数

如何更改 CSS 中下拉箭头的位置

NOT A DUPLICATE - 请仔细阅读并理解问题。我不想更换箭头。我想保持箭头的原样并改变它的位置。appearance:none可以隐藏箭头并通过设置background:url()我可以替换箭头,但这不是我的问题

我有一个看起来不错并且工作正常的下拉列表。我们都知道默认情况下它会在下拉列表的右侧添加一个下拉箭头。现在我想要做的是将箭头向下移动到像margin-top:5px. 但我找不到任何pseudo elementsclasses编写我的代码。我想仅使用css来实现这一点。我发现样式是为了隐藏元素并添加另一个元素,但在我的情况下,我想保持图标的原样并更改位置。

html

<select class="dropdown-select">
   <option value="">Select Location</option>
   <option value="location-1">Location 1</option>
   <option value="location-2">Location 2</option>
   <option value="location-3">Location 3</option>
</select>
Run Code Online (Sandbox Code Playgroud)

css

.dropdown-select{
  outline: none;
  border: none;
}
Run Code Online (Sandbox Code Playgroud)

html css dropdown

8
推荐指数
2
解决办法
2万
查看次数

标签 统计

css ×4

html ×3

select ×2

dropdown ×1

jquery ×1