html – 在select中显示标签

发布时间：2020-12-14 19:41:53 所属栏目：资源来源：网络整理

导读：我找不到任何相关信息,甚至不确定它在 HTML中是否可行,但我想在选择字段中的值上方显示一个Label行,如下图中的“EXP MONTH / YEAR”：那可行吗？我一直在寻找一种方法来实现它几天无济于事.谢谢！解决方法我可能有点晚了,但是：你不需要任何特别的东西,它

我找不到任何相关信息,甚至不确定它在 HTML中是否可行,但我想在选择字段中的值上方显示一个Label行,如下图中的“EXP MONTH / YEAR”：

那可行吗？我一直在寻找一种方法来实现它几天无济于事.谢谢！

解决方法

我可能有点晚了,但是：你不需要任何特别的东西,它只是简单的形成.
将标签放在表单的顶部,包装两个标签并在div中选择,然后调整背景颜色和边框.看例子：

.select-wrap 
{
  border: 1px solid #777;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 0 5px 5px;
  width:200px;
  background-color:#ebebeb;
}

.select-wrap label
{
  font-size:10px;
  text-transform: uppercase;
  color: #777;
  padding: 2px 8px 0;
}

select
{
  background-color: #ebebeb;
  border:0px;
}

<div class="select-wrap">
  <label>Color</label>
  <select name="color" style="width: 100%;">
    <option value="">---</option>
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
  </select>
</div>

UPDATE

我莫名其妙地记得我有这篇文章.因为我已经改进了它用于个人使用,这是版本更好(你可以点击选择内的任何地方 – 它将触发下拉,而在以前的版本你不能)我想我应该分享我对我的代码所做的更新从那时起使用.

.select-wrap {
  border: 1px solid #777;
  border-radius: 4px;
  padding: 0 5px;
  width:200px;
  background-color:#fff;
  position:relative;
}
.select-wrap label{
  font-size:8px;
  text-transform: uppercase;
  color: #777;
  padding: 0 8px;  
  position: absolute;
  top:6px;
}

select{
  background-color: #fff;
  border:0px;
  height:50px;
  font-size: 16px;
}

<div class="select-wrap">
  <label>Color</label>
  <select name="color" style="width: 100%;">
    <option value="">---</option>
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
  </select>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!