造型 <select>在CSS问题

Question

I am using pure CSS to style a < select > drop down box. 我使用纯CSS来设置<select>下拉框的样式。 Using the code below, I am able to do this with one hiccup: when the text on the option becomes too wide, it doesn't cut off before the background image of the drop down arrow. 使用下面的代码，我可以通过一次打嗝来执行此操作：当选项上的文本变得太宽时，它不会在下拉箭头的背景图像之前切断。

普通视图

When the text is too long: 当文字太长时：

文字太长了

What I would like to accomplish is to have the text cut off before the drop down arrow image so that they do not overlap. 我想要完成的是在下拉箭头图像之前切断文本，使它们不重叠。 However, I would still like the full text to display when the drop down list is expanded: 但是，我仍然希望在下拉列表展开时显示全文：

Here is the code: 这是代码：

<!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>

Any ideas on how I could trim off the text when displaying the collapsed drop down box but still show the full text when expanded. 有关如何在显示折叠下拉框时剪切文本但在展开时仍显示完整文本的任何想法。 All this while remaining purely in CSS. 所有这一切，同时仍然纯粹在CSS中。 Thanks! 谢谢！

Answer 1

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

Answer 2

My first suggestion would be to make the select wide enough to account for your largest character count. 我的第一个建议是将select范围扩大到足以说明你最大的字符数。 I'm sure you thought of that and it's not available. 我确定你已经想到了这个并且它不可用。

My second recommendation is adding Javascript, particularly jQuery DD, to replace the select options with definition lists that can be more easily styled. 我的第二个建议是添加Javascript，特别是jQuery DD，用可以更容易定型的定义列表替换select options 。 https://github.com/HenrikJoreteg/jquery.dd https://github.com/HenrikJoreteg/jquery.dd

造型 <select>在CSS问题

问题描述

2 个解决方案

解决方案1
2 2012-05-29 19:21:15

解决方案2
2 已采纳 2012-05-29 19:54:50

造型 <select>在CSS问题

问题描述

2 个解决方案

解决方案1 2 2012-05-29 19:21:15

解决方案2 2 已采纳 2012-05-29 19:54:50

解决方案1
2 2012-05-29 19:21:15

解决方案2
2 已采纳 2012-05-29 19:54:50