Question

所以，我有一个带有select元素的HTML页面，它有一个自定义箭头。问题是select元素文本超出了select元素的箭头。我不要那个。文字不应超过箭头。

请注意：我正在寻找跨浏览器解决方案。

这是我的CSS代码。默认选择箭头将替换为自己的图像。

div.pudotusvalikko {
  width: 95%;
  box-sizing: content-box;
  height: 22px;
  padding: 0;
  overflow: hidden;
  background-color: #FFFFFF;
  background-image: url(/kuvat/arrow22x22.gif); /* width 22 px and height 22 px */
  background-repeat: no-repeat;
  background-position: right center;
  border: 1px solid #999999;
}

div.seura {
  width: 224px;
}

div.pudotusvalikko select {
  border: none;
  font-size: 12px;
  padding: 2px;
  width: 110%;
  box-sizing: content-box;
  height: 18px;
  line-height: 18px;
  text-align: left;
  background: transparent;
  background: rgba(0,0,0,0);
  -webkit-appearance: none;
}

这是我的HTML代码。当项目＆＃34;列表的默认值为＆＃34;如果选中，其文本将覆盖自定义选择箭头。

<div class="pudotusvalikko seura">
  <select name="se1" id="se1">
    <option value="1">All</option>
    <option value="2">GUU</option>
    <option value="3">PPP</option>
    <option value="4">SBK</option>
    <option value="5" selected="selected">Default value of the list is this</option>
  </select>
</div>

如果我想要项目文本＆＃34;列表的默认值是这个＆＃34;我应该如何修改我的代码？不会超过自定义选择箭头？

修改

正如您在此处看到的，文本来自背景图像。我该怎么做才能解决这个问题？

＆＃13;

div.pudotusvalikko {
  width: 95%;
  box-sizing: content-box;
  height: 22px;
  padding: 0;
  overflow: hidden;
  background-color:#fff;
  background-image: url('https://source.unsplash.com/random'); /* width 22 px and height 22 px */
  background-repeat: no-repeat;
  background-position: right center;
  background-size:20px 20px;/*Add this*/
  border: 1px solid #999999;
}

div.seura {
  width: 224px;
}

div.pudotusvalikko select {
  border: none;
  font-size: 12px;
  padding: 2px;
  width: 110%;
  box-sizing: content-box;
  height: 18px;
  line-height: 18px;
  text-align: left;
  background: transparent;
  background: rgba(0,0,0,0);
  -webkit-appearance: none;
}

＆＃13;

<div class="pudotusvalikko seura">
  <select name="se1" id="se1">
    <option value="1">All</option>
    <option value="2">GUU</option>
    <option value="3">PPP</option>
    <option value="4">SBK</option>
    <option value="5" selected="selected">Default value of the list is this this this this this this this this this this this</option>
  </select>
</div>

＆＃13;

Answer 1

<select>菜单来自操作系统和浏览器UI，而不是您的代码。例如，在iOS上，界面与Windows或OS X上的界面完全不同。

如果您需要此行为，则需要创建CSS或Javascript下拉菜单。

Answer 2

您是否为图片设置了背景尺寸，如下面的代码

＆＃13;

div{
  width: 330px;
  height: 22px;
  padding: 0;
  overflow: hidden;
  background-color:#fff;
  border: 1px solid #999999;
}
div::before{
  content:'';
  background:#f22;
  position:absolute;
  width:20px;
  height:20px;
  top:10px;
  left:320px;
  z-index:9;
  pointer-events:none;
  background:url("https://source.unsplash.com/random");
  background-repeat:no-repeat;
  background-size:20px 20px;
}
select {
  border: none;
  font-size: 12px;
  padding: 2px;
  box-sizing: content-box;
  height: 18px;
  line-height: 18px;
  text-align: left;
  width:100%;
 }

＆＃13;

<div>
  <select name="se1">
    <option value="1">All</option>
    <option value="2">GUU</option>
    <option value="3">PPP</option>
    <option value="4">SBK</option>
    <option value="5" selected="selected">Default value of the list xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</option>
  </select>
</div>

＆＃13;

Answer 3

添加右边距，而不是限制选择宽度。

带有自定义箭头的HTML select元素 - 文本来自箭头

3 个答案: