【问题标题】:how to make my select dropbox looks pretty?如何使我的选择保管箱看起来很漂亮?
【发布时间】:2016-03-23 03:50:58
【问题描述】:

<div>
    <label for="vehicie_type">Vehicie Type:</label>
    <select id="vehicie_type">
      <option>11111</option>
      <option>22222</option>
      <option>33333</option>
    </select>
  </div>
  <div>
    <label for="cc">CC:</label>
    <select id="cc">
      <option>11111</option>
      <option>22222</option>
      <option>33333</option>
    </select>
  </div>

如何使我的选择保管箱看起来像下图? 我想要的是不同侧的文本和选择框,看起来井井有条。

【问题讨论】:

标签: html css


【解决方案1】:

因为你没有发布任何关于你的 css 的东西......像这样的东西?

label {
  width: 100px;
  text-align: right;
  display: inline-block;
  margin-top: 20px;
}
select {
  border: 2px solid #333;
  display: inline-block;
  border-radius: 5px;
  width: 200px;
  color: #ccc;
  height: 30px;
  line-height: 30px;
}
<div>
  <label for="vehicie_type">Vehicie Type:</label>
  <select id="vehicie_type">
    <option>11111</option>
    <option>22222</option>
    <option>33333</option>
  </select>
</div>
<div>
  <label for="cc">CC:</label>
  <select id="cc">
    <option>11111</option>
    <option>22222</option>
    <option>33333</option>
  </select>
</div>

【讨论】:

    【解决方案2】:

    这是我想出的:

    select{
        border-radius: 8px;
        border: 2px solid gray;
        height: 25px;
        color: gray;
    }
    

    JSFiddle demo here

    【讨论】:

      猜你喜欢
      • 2020-06-20
      • 2013-11-17
      • 1970-01-01
      • 2015-11-16
      • 1970-01-01
      • 1970-01-01
      • 2018-01-08
      • 2019-02-14
      相关资源
      最近更新 更多