Question

我使用纯CSS来设置＆lt;选择＆gt;下拉框。使用下面的代码，我可以通过一次打嗝来做到这一点：当选项上的文字变得太宽时，它不会在下拉箭头的背景图像之前切断。

Normal View

当文字太长时：

Text too long

我想要完成的是在下拉箭头图像之前切断文本，使它们不重叠。但是，我仍然希望在下拉列表展开时显示全文：

Expanded

以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Styling Selects</title>
    <style type="text/css">
        .selectDiv select {
            background: transparent;
            width: 250px;
            padding: 7px;
            font-size: 16px;
            border: none;
            height: 34px;
            text-transform: lowercase;
            color: #666666;
            z-index: 100;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .selectDiv {
            border: 2px solid #666666;
            display: block;
            width: 218px;
            height: 34px;
            overflow: hidden;
            position:relative;
            display: inline-block;
        }

        .selectButtonDiv {
            width: 16px;
            height: 16px;
            z-index: 99;
            position: absolute;
            left: 190px;
            top: 9px;
            display: inline-block;
            background: url("stream_7B0046.png") no-repeat -96px #FFF;
        }       
    </style>
</head>
<body>
    <div class="selectDiv">
        <div class="selectButtonDiv"></div>
        <select>
            <option value="Option 1">Option 1</option>
            <option value="Option With Really Long Name">Option With Really Long Name</option>
        </select>
    </div>
</body>
</html>

有关如何在显示折叠下拉框时修剪文本但在展开时仍显示完整文本的任何想法。所有这一切，同时仍然纯粹在CSS中。谢谢！

Answer 1

将select放入内部div中，并在现有selectDiv上使用padding-right或在内部div上使用margin-right。

Answer 2

我的第一个建议是让select宽到足以说明你最大的字符数。我确定你已经想到了这个并且它不可用。

我的第二个建议是添加Javascript，特别是jQuery DD，用可以更容易设计样式的定义列表替换select options。 https://github.com/HenrikJoreteg/jquery.dd

在CSS问题中设置<select>的样式</select>

2 个答案: