html - UI - 将文本框显示为下拉列表(只是外观)

Question

我有 Jquery AutoComplete 文本框，我们需要将其显示为 DropDown(只是外观和感觉)。我想出了一些 css，如下所示

background-image: url("DropDownIcon.png");
background-position: right center;
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;

如果您注意到第一个文本框，如果有很长的文本，它会与图标重叠

我可以实现哪些其他选项来使外观和感觉良好而文本不会与图标重叠或欢迎任何其他建议

我只是为了拥有外观和感觉，我不想使用下拉菜单

Answer 1

只需添加一个 padding-right:12px; 就可以了。试试这个:

background-image: url("DropDownIcon.png");
background-position: right center;
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
padding-right:12px;

更新:查看 DEMO