ラベルとドロップダウンのみの入力グループ（<input hidden>）（<select>を避けてください）

Question

ドロップラベルのみを使用して入力ラベルを作成しようとしています。私はselectを避けようとしています。

私は以下のコードをinput-grpで使用していますが、その間に<input type="text">を表示しない方法を理解できません。このことを可能にするのは、見栄えを維持しながら<input type="hidden">ですか？ここで

<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"> <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>

スクリーンショットです：

Answer 1

必要なのは、要素によって継承されたスタイルを上書きすることです。

非表示にすると、元のレイアウトがそのまま残っていることが確認されます。

これはあなたができることです。

/* override Styles here. */ 
 
.custom .input-group-addon + input { 
 
    display: none; 
 
} 
 
.custom .dropdown-menu-right{ 
 
    right:auto; 
 
}

<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>