相关疑难解决方法(0)
选择箭头样式更改
我正试图用我自己的图片替换选择的箭头.我将选择包含在具有相同大小的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;
}<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 …104
推荐指数
推荐指数
13
解决办法
解决办法
40万
查看次数
查看次数
隐藏<select>元素的下拉箭头的正确"-moz-appearance"值是什么
我正在尝试<select>使用CSS 设置元素的下拉箭头,它在Chrome/Safari中完美运行:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url('./select-arrow1.png') ;
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
margin: 0;
padding-top: 2px;
padding-bottom: 2px;
width: 200px;
}
这看起来很漂亮
根据这个逻辑,我必须做的唯一让它在Firefox中工作的是添加所有-webkit-*东西-moz-*:
-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;
它适用于99%,唯一的问题是默认下拉箭头不会消失,并保持在背景图像的顶部,如此处所示
看起来-moz-appearance: button;对<select>元素不起作用.也-moz-appearance: …
67
推荐指数
推荐指数
2
解决办法
解决办法
10万
查看次数
查看次数
选择背景图片(下拉列表)在Chrome中不起作用
我想使用图像作为选择/下拉列表的背景.以下CSS在Firefox和IE中运行良好,但在Chrome中不起作用:
#main .drop-down-loc { width:506px; height: 30px; border: none;
background-color: Transparent;
background: url(images/text-field.gif) no-repeat 0 0;
padding:4px; line-height: 21px;}
31
推荐指数
推荐指数
3
解决办法
解决办法
15万
查看次数
查看次数
单击另一个元素时选择（展开）下拉菜单
我有一个div，其中包含一个选择菜单和另一个元素（.dropArrow）。
我想做的是单击.dropArrow时选择菜单。
这是到目前为止我尝试过的jQuery，但是没有成功...
$(".dropArrow").live('click', function() {
$(this).siblings("select").click();
});
的HTML
<div class="selectContainer selectTest" style="width: 305px;">
<select id="selectTest">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<span class="dropArrow">^</span>
</div>
我猜这是.click（）部分错误，因为我可以将其更改为.hide（）之类，并且可以正常工作。
5
推荐指数
推荐指数
1
解决办法
解决办法
2423
查看次数
查看次数