如何截断使用CSS的选择框中的文本

我一直在尝试使这项工作有一段时间，但两天没有成功。如何截断使用CSS的选择框中的文本

我需要使用CSS截取/隐藏中间的选择框中的文本。场地的其余部分（右侧）应保持空白/白色，并且背景图像应位于右侧。我尝试过的解决方案的问题是，选择框的宽度需要更改，在这种情况下，宽度需要保持不变，以便将背景箭头保留在当前位置。事情是这样的：

enter image description here

也许有人会有一个好主意（JavaScript是不是一个可行的选择）：

这里的HTML：

<div class="dropdown"> 
    <select> 
     <option value="">Some Text</option> 
     <option value="">Some More Text2</option> 
     <option value="">Some More More More Longer Text</option> 
    </select>         
</div>

而且这里的CSS：

.dropdown{ 
    width:150px; 
    border: 1px solid #cfcfcf; 
    height: auto; 
    border-radius: 5px; 
    padding:3px 4px 4px; 
    position: relative; 
    z-index: 0; 
    overflow:hidden; 
    } 

.dropdown select{ 
    border: none; 
    background-color: transparent; 
    outline: none; 
    padding: 1px 0 0 5px; 
    width:165%; 
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right; 
background-position: 55%; 
    }

JSF在这里：http://jsfiddle.net/pazzesco/r6c9zcpc/7/

来源

2014-11-14 BradG

制作这种情况有位CSS3的将是你最好的选择现在和未来。

这里是呈现出不同的技术小提琴，仍然使用你的箭头：

http://jsfiddle.net/plastclens/16Ljd8s8/2/

/* this places an arbitrary element inside the dropdown but before it's children elements */ 
/* We use it to cover half the select box as well as display the custom arrow */ 
.dropdown:before { 
    height:29px; 
    width:75px; 
    display:block; 
    content:''; 
    position:absolute; 
    top:0; 
    right:3px; 
    background: url(http://i57.tinypic.com/nnmgpy_th.png) #fff no-repeat right; 
    pointer-events:none; 
}

一个重要但被忽视的部分是pointer-events:none;线。它可以让点击这个“叠加”来通过它并选择。

这里是一个没有图像的方法的另一个不错的资源：http://cssdeck.com/labs/styling-select-box-with-css3您可能需要调整了一点，但你会得到点

来源

2014-11-14 21:29:45 ftairs

感谢的人！这正是我所需要的。关于'pointer-events：无;'的好处。唯一的问题是它不被IE10或更低版本支持。再次感谢！ – BradG 2014-11-15 11:04:33

样式下拉式有时很棘手。你可以点右键 - 填充添加到选择给力的元素的文本停止“内部”你的背景：

.dropdown select{ 
    border: none; 
    background-color: transparent; 
    outline: none; 
    padding: 1px 0 0 5px; 
    width:165%; 
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right; 
    background-position: 55%; 
    padding-right: 80%; 
}

JSFiddle

来源

2014-11-14 21:29:13 cypherkaz

如何截断使用CSS的选择框中的文本

回答

相关问题