如何仅使用css将长选择框文本放置在自定义箭头下方

我正在为一组选择框设计一个自定义箭头（使用背景图像）

问题是，每个选择框的宽度都应该很短，因此，如果文本长度超过此宽度，它将显示在背景箭头上。 我需要找到一种在文本上显示背景图像的方法

另一个问题是大约有500个这样的选择框，我不希望在HTML代码中为每个框添加一个跨层来实现这个目标

因此，我只寻找CSS解决方案。JS也不起作用

以下是CSS：

.dropdown{
    width:57px;
    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:145%;
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right;
background-position: 55%;
    }

请点击此处：

---

如果您有任何意见或想法，我们将不胜感激。

您是否考虑过在您的

选择器上增加适当的填充。下拉列表

选择10px？

填充：3px10px 4px

应确保文本不会与箭头重叠

或者，您真的希望文本显示在箭头后面（如果将箭头作为背景图像，则无法工作）？：）

我希望我没有误解这个问题

干杯

---

Ines

只需将右填充值增加30 px即可

。下拉选择{填充：1px 30px 0 5px；}

结果：这将剪辑文本；从右侧30像素

---

JSFiddle Here:

[http://jsfiddle.net/nvishnu/Lq7hosrd/2/]

您好，填充无效，因为我有意隐藏默认的选择框箭头。我需要的是显示/隐藏/剪切文本，以便背景图像位于顶部。嗨，毗瑟奴，填充将不起作用，因为我有意隐藏默认的选择框箭头。我需要的是显示/隐藏/剪切文本，以便背景图像位于顶部。您好@BradG，您看过我发布的JSFIDLE吗？。不是你想要的结果吗？谢谢你的JSFIDLE，我检查了它，但是改变填充会在背景图像上移动默认箭头，这是我不想要的。我需要的是隐藏或裁剪背景图片下面的文本。欢迎！必须更改.dropdown select{}的padding right值，而不是.dropdown{}。希望你能像我一样修好。