相关疑难解决方法(0)

我想删除即将出现在下拉列表之外的边框.
我在尝试:

select#xyz option {
  Border: none;
}

但对我不起作用.

如何设置HTML复选框,单选按钮和下拉菜单的样式？或者我可以吗？

我想将图像用于复选框或单选按钮,对于列表也是如此 - 下拉箭头在大多数情况下看起来并不好看.

在图片中,选项的宽度大于选择框.我想将这些选项的宽度设置为与选择框相同,对于那些较大的选项,将text-overflow设置为省略号.任何帮助,将不胜感激.

这是我尝试过的:

HTML

<select>
    <option>Select your University</option>
    <option>Bangladesh University of Engineering and Technology</option>
    <option>Mawlana Bhashani Science and Technology University</option>
</select>

CSS

select, option {
    width: 250px;
}

option {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

小提琴:https://jsfiddle.net/3bsbcqfz/

我正在使用以下代码来自定义我的选择下拉箭头:

HTML:

<span class="selectWrapper">
    <select id="rowselect" class="pageinfoselect input-mini">
        <option>...</option>
    </select>
</span>

CSS:

span.selectWrapper {
    position: relative;
    display: inline-block;
          width:65px;
}

span.selectWrapper select {
    display: inline-block;
    padding: 4px 3px 3px 5px;
    margin: 0;
    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #f5f5f5;
    height:30px;
    color:#666666;
    border:1px solid #dddddd;
}




/* Select arrow styling */
span.selectWrapper:after {
    content: url("../images/arrow_down.png");
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    line-height: 30px;
    padding: 0 7px;
    background: #f5f5f5;
    color: white; …

这个hack曾经在<= Firefox 29中工作以删除<select>箭头:

text-overflow: '';
text-indent: 0.01px;
-moz-appearance: none;

它不再适用于Firefox 30.箭头又回来了.

• Codepen for hack适用于Firefox 29
• 相关错误(现已在Fx 35b中修复)

有谁知道达到同样效果的方法？

注1:我对使用另一个元素覆盖箭头的解决方案或嵌套select元素并执行溢出的解决方案不感兴趣:隐藏.

注2:我尝试了所有-moz-appearance可能性.它们要么添加我无法覆盖的默认样式,要么不允许自定义样式(特别是边框和背景),或者箭头仍然可见.

更新:它在Firefox 35(目前处于测试版)中再次使用-moz-appearance: none,使其在所有最新浏览器(在IE11,Firefox 35b,Chrome 39,Safari 8 中测试)中保持一致:http://jsfiddle.net/phd5pu9x/

我有一个<table>可以通过将其包裹在<div>固定高度的可滚动.

这<table>有一个下拉组件(图像中的行列中的蓝色容器和下面给出的jsfiddle2nd1st),它隐藏在容器后面<div>.我想让它显示所有选项.

JSFIDDLE (示例)

如何将下拉组件带到容器外部<div>以显示所有选项,如下图所示？

如果我删除pRelative容器,则下拉列表完全可见 - 但是当我滚动时,下拉列表不会随着它的容器滚动.

提前致谢.

PS:只寻找CSS/javascript解决方案.

我正在尝试设计一个Select标签,如下图所示:

不知何故,我设法通过将选择标记包装在div中来设计它.但问题是当我点击设计的箭头时,选择标签不起作用或显示所有列表.

我期待的是当我点击箭头时,select标签应该显示所有选项.因为箭头部分是使用父包装元素伪元素生成的,所以没有发生这种情况.我没有使用伪元素选择器选择标签,因为它似乎无法正常工作.

我可以使用background-image父包装器解决这个问题,但因为我有权尽可能地更改html,我正在寻找更好的方法,而不使用图像或javascript,即只使用CSS.

这是小提琴.

<div class="select-wrapper">
    <select>
        <option>EEE</option>
        <option>ECE</option>
        <option>EIE</option>
    </select>
</div>

.select-wrapper {
    display:inline-block;
    border:1px solid #bbbbbb;
    position:relative;
    width:120px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    margin-top: 10px;
}
.select-wrapper:before{
    content: "";
    position:absolute;
    right: 5px;
    top:8px;
    border-width: 5px 5px 5px 5px;
    border-style: solid;
    border-color: #666666 transparent  transparent  transparent ;
    z-index:3;
}
.select-wrapper:after {
    content:"";
    display:block;
    position:absolute;
    top:0px;
    bottom:0px;
    width:20px;
    right:0px;
    border-left:1px solid #bababa;
    background-color:#ededed;
    -webkit-border-top-right-radius:5px;
    -moz-border-top-right-radius:5px;
    border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -moz-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
}
select {
    width:100%;
    background-color:#ededed;
    border:none; …

我正在使用引导下拉列表,并且需要将第一个选项作为默认选项.以下不起作用.

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    CHOOSE FEATURE
    <span class="caret"></span>
</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li selected="selected"><a>Feature 1</a></li>
    <li><a>Feature 2</a></li>
    <li><a>Feature 3</a></li>
    <li><a>Feature 4</a></li>
    <li><a>Feature 5</a></li>
    <li><a>Feature 6</a></li>
</ul>

是否有一个'好'干净的CSS黑客列表,这肯定是面向未来的？

例如,zoom:1安全,只要它只提供给IE,你就会记得它在那里.使用子选择器的常见黑客并不安全,因为IE7支持它们.使用height:1%只是感觉很脏(但可能只是我).

我知道ie7-js,所以IE6的bug不用担心我.此外,我不是在寻找宗教辩论,只是消息来源.

感谢回复 - 我选择了最好的来源作为回答.

还要感谢使用单独的CSS文件的建议,或者不要担心它.我完全同意你的看法,对我来说,这些都是给予的.但是当遇到布局问题时,我想要一个安全的解决方案,这将最大程度地降低我在IE或$ FF + 1中重新审视问题的风险.抱歉,我没有说清楚.

我使用有一个HTML/CSS下拉<select>和<option>元件(未<ul>,<li>).我想设置下拉选项的样式,以便当您单击打开下拉列表时,选项列表将显示在下拉列表标题下方(您在单击以打开它之前看到的位),而不是在该标题之上或模糊该标题.

我知道使用<select>和<options>仅使用html/css 来设置下拉列表存在限制,但我想知道是否有可能实现这一点而无需沿着自定义下拉路线.

我相信这可能会因浏览器而异,但我在Mac上的Chrome上遇到了问题.

<select name="numbers"> 
  <option value="1">1</option> 
  <option value="2">2</option>
  <option value="3">3</option>
</select>

目前,当下拉菜单关闭时,您会看到"1",当您打开它时,您将无法再看到所选的数字1,您只能看到新的选项列表1,2,3,它直接位于1的顶部对于以前关闭的下拉列表.我希望它能让您始终看到所选择的选项,例如1(下拉列表是打开还是关闭),当您打开下拉列表时,您的选项列表会显示在当前所选选项下方而不会遮挡它.