Question

我一直试图让这项工作有一段时间，但现在两天都没有成功。

我需要仅使用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%;
    }

JSFiddle：http://jsfiddle.net/pazzesco/r6c9zcpc/7/

Answer 1

造型下拉有时候很棘手。你可以在select中添加一些右边填充以强制元素的文本停在你的背景“内部”：

.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

Answer 2

使用一点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你可能需要稍微调整一下，但你会明白这一点

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

2 个答案: