CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Noitidart
Noitidart

Reputation: 37288

Input group with label and dropdown only (<input hidden>) (avoid <select>)

I'm trying to create an input label with drop down only, as I am trying to avoid select as per recommendation.

I have the code below, using input-grp however I can't figure out how to not show the <input type="text"> in between. Is this possible to make this <input type="hidden"> while maintaining good looks? 

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

Here is a screenshot:

Upvotes: 2

Views: 641

Answers (1)

Sreekanth
Sreekanth

Reputation: 3130

All you need is to override the styles inherited by the elements.

Visibility hidden makes sure that you have your original layout intact, just that the elements are not hidden.

This is what you could do.

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

Upvotes: 1

Related Questions