仅带标签和下拉列表的输入组(<input hidden =“”/>)(避免<select>)

时间:2016-11-19 05:00:12

标签: twitter-bootstrap twitter-bootstrap-3

我正在尝试创建一个仅下拉的输入标签,因为我试图避免按照建议选择。 我有下面的代码,使用input-grp然而我无法弄清楚如何不显示&lt; input type =“text”&gt;之间。是否可以使此&lt; input type =“hidden”&gt;同时保持良好的外观? &lt; link rel =“stylesheet”href =“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”integrity =“sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u”crossorigin =“anonymous “&GT; &lt; div class =“input-group”&gt; &lt; span class =“input-group-addon”&gt;语言&lt; / span&gt;   &lt; input class =“form-control”type =“text”placeholder =“我想隐藏此输入文字使其键入=隐藏”&gt;   &lt; div class =“input-group-btn open”&gt;     &lt; button type =“button”class =“btn btn-default dropdown-toggle”&gt;英语(en-US)&lt; span class =“caret”&gt;&lt; / span&gt;     &LT; /按钮&GT;     &lt; ul class =“dropdown-menu dropdown-menu-right”&gt;       &LT;李&GT;         &lt; div class =“input-group input-group-sm”style =“margin:0 auto;”&gt;           &lt; input class =“form-control”aria-describedby =“basic-addon1”&gt;         &LT; / DIV&GT;       &LT; /锂&GT;       &lt; li class =“divider”&gt;&lt; / li&gt;       &lt; li&gt;&lt; a href =“#”&gt;法语(fr)&lt; / a&gt;       &LT; /锂&GT;       &lt; li&gt;&lt; a href =“#”&gt;西班牙语(es-ES)&lt; / a&gt;       &LT; /锂&GT;     &LT; / UL&GT;   &LT; / DIV&GT; &LT; / DIV&GT; 这是一个截图:

1 个答案:

答案 0 :(得分:1)

您只需要覆盖元素继承的样式。

隐藏可见性可确保原始布局完好无损,只是元素不会被隐藏。

这就是你能做的。

&#13;
&#13;
/* override Styles here. */
.custom .input-group-addon + input {
  display: none;
}
.custom .dropdown-menu-right{
  right:auto;
}
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="input-group custom"> <span class="input-group-addon">Language</span>
  <input class="form-control" type="text" placeholder="I want to hide this input text make it type=hidden">
  <div class="input-group-btn open">
    <button type="button" class="btn btn-default dropdown-toggle">English (en-US) <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li>
        <div class="input-group input-group-sm" style="margin: 0 auto;">
          <input class="form-control" aria-describedby="basic-addon1">
        </div>
      </li>
      <li class="divider"></li>
      <li><a href="#">French (fr)</a>
      </li>
      <li><a href="#">Spanish (es-ES)</a>
      </li>
    </ul>
  </div>
</div>
&#13;
&#13;
&#13;