如何截斷使用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的選擇框中的文本

回答

相關問題