Metoda wprowadzania stylów Bootstrap3 CSS

Question

Próbuję utworzyć pole wyszukiwania z rozwijanym menu. Próbowałem użyć grupy wejściowej bootstrap, aby dać złudzenie, że przycisk znajduje się wewnątrz pola.

To co staram się osiągnąć na poniższym zrzucie ekranu:

To, co mam tak daleko:

Próbuję dowiedzieć się, w jaki sposób aby menu rozwijane przesuwało się na prawo od pola wyszukiwania, aby ta marchewka również się wyświetliła.

Jakieś wskazówki dotyczące zmiany pozycji menu, a także przyciskania tego przycisku rozwijania, nie mają koloru po najechaniu myszą?

<div class="container div-cntr"> 
    <div class="form-group"> 
     <div class="input-group"> 
     <input type="text" class="form-control input-lg" id="toolSearch" name="toolSearch" placeholder="What are you looking for?"> 
     <div class="input-group-btn"> 
      <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> 
      <ul class="dropdown-menu"> 
       <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 1</a></li> 
       <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 2</a></li> 
      </ul> 
     </div> 
     </div> 
     <br /> 
     <button type="button" class="btn btn-default btn-lg">Search</button> 
    </div> 
</div> 

-

.div-cntr { 
    left: 50%; 
    margin-left: -350px; 
    margin-top: -150px; 
    min-height: 150px; 
    position: absolute; 
    text-align: center; 
    top: 50%; 
    width: 700px; 
} 
.filterOptions{ 
    border-left: 0px; 
} 
.btn-lg { 
    line-height: 1.22; 
} 
#toolSearch:focus { 
    outline:none; 
} 

Oto skrzypce I utworzyły: https://jsfiddle.net/carlhussey/tfrpncu7/

Answer 1

Oto CSS trzeba wykonać co wskazano chciałeś:

.dropdown-menu { 
    right: 0; /* Align dropdown-menu to right instead of left */ 
    left: auto; 
} 

.input-group .dropdown-toggle.filterOptions { 
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
    z-index: 5; /* Fix for 2 input-group-btns and this one not being the last-child */ 
} 

.dropdown-menu>li>a:focus, 
.dropdown-menu>li>a:hover { 
    background-color: transparent; /* Fix for dropdown-menu item hover background-color */ 
} 

Oto jak to wygląda:

poszedł do przodu i zaktualizowaniu Fiddle:

https://jsfiddle.net/tfrpncu7/3/

Answer 2

Oto Fiddle z położenia zestawu rozwijanej, a przycisk z białym tle na `: aktywny'. Daj mi znać, jeśli tego właśnie szukasz.

https://jsfiddle.net/tobyl/4p41p3kg/2/

Dodany CSS:

.dropdown-menu { 
    left: auto; 
    right: 0; 
} 

.open > .dropdown-toggle.btn-default:active, .open > .dropdown-toggle.btn-default:focus { 
    background-color: #fff; 
} 

Answer 3

Zacznę od odpowiedzi na drugą część pytania

Dokonywanie tego przycisku rozwijanego nie mają kolor przy aktywowaniu

Narzędzia dla programistów Chrome (kliknij prawym przyciskiem myszy dowolny element strony i wybierz Inspect element) mogą bardzo pomóc, jeśli chodzi o elementy stylizacji pod states (jak hover). Aby zobaczyć, która reguła stylu jest stosowana po najechaniu myszą, we can force the hover state on the button through dev-tools. Widzimy, że .btn-default ubiega

.btn-default:hover { 
    color: #333; 
    background-color: #e6e6e6; 
    border-color: #adadad; 
} 

Ponieważ przycisk ten ma następujące klasy pierwszeństwo <button class="btn btn-default btn-lg dropdown-toggle filterOptions"> (klas do odpowiednich reguł nadpisywania z klas w lewo) Możemy zastępują style kursorem myszy na .btn-default poprzez regułę stan zawisu: filterOptions.

.filterOptions:hover { 
    background-color: white; 
    border-color: #ccc; 
} 

Regulacja położenia menu jak również

Ponownie sprawdzając element rozwijanego w dev-tools widzimy, że prawidłowa zasada styl przesłonić domyślne ustawienie i uczynić rozwijana pozycja na prawo byłoby:

.open>.dropdown-menu { 
    right: 0; 
    left: initial; 
} 

Updated skrzypce: https://jsfiddle.net/tfrpncu7/4/

Pamiętaj, że css nie ma żadnego zakresu, więc zawsze dobrze jest zawsze stosować nowe klasy inne niż bootstrap podczas stylizacji określonego elementu. Jeśli projekt jest duży, należy rozważyć zastosowanie konwencji nazewnictwa css, np. BEM, aby ograniczyć ryzyko nazwania kolizji.

Answer 4

Powinieneś używać input-group-lg wraz z input-group i dropdown-menu-right do prawidłowego umieszczenia menu rozwijanego. Dla innych CSS użyj pseudo elements.

Przykład pracy:(poziom specyficzności jest więc przykład działa na Stackoverflow.)

.div-cntr { 
 
    margin-top: 100px; 
 
    text-align: center; 
 
    max-width: 700px; 
 
    /*for example only*/ 
 
    background: red; 
 
    min-height: 300px; 
 
    /*for example only*/ 
 
} 
 
.form .open>.dropdown-toggle.filterOptions.focus, 
 
.form .open>.dropdown-toggle.filterOptions:focus, 
 
.form .open>.dropdown-toggle.filterOptions:hover .input-group-lg>.form-control, 
 
.form .input-group.input-group-lg>.input-group-btn>.filterOptions { 
 
    border: 1px solid #ccc; 
 
    border-left: 0; 
 
    outline: none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    border-radius: 0; 
 
    background: #fff; 
 
} 
 
.form .dropdown-menu.dropdown-menu-search { 
 
    top: 60px; 
 
    right: 110px; 
 
    border-radius: 0; 
 
    border: 0; 
 
    background: #fff; 
 
} 
 
.form .dropdown-menu.dropdown-menu-search:after { 
 
    top: -15px; 
 
    right: 10px; 
 
    position: absolute; 
 
    content: ''; 
 
    border-width: 0px 15px 15px 15px; 
 
    border-style: solid; 
 
    border-color: #fff transparent; 
 
    height: 0; 
 
    width: 0; 
 
} 
 
.form .form-control.toolSearch, 
 
.form .form-control.toolSearch:focus { 
 
    outline: none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    border-radius: 0; 
 
    border: 1px solid #ccc; 
 
    border-right: 0; 
 
} 
 
.form .input-group-btn .btn.btn-search, 
 
.form .input-group-btn .btn.btn-search.active { 
 
    border-radius: 0; 
 
    border: 1px solid #ccc; 
 
    border-left: 0; 
 
} 
 
.form .input-group-btn .btn.btn-search:hover, 
 
.form .input-group-btn .btn-search:focus { 
 
    outline: none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    border: 1px solid #ccc; 
 
    border-left: 0; 
 
    border-radius: 0; 
 
    background: #fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container div-cntr"> 
 
    <div class="form-group form"> 
 
    <div class="input-group input-group-lg"> 
 
     <input type="text" class="form-control toolSearch" id="toolSearch" name="toolSearch" placeholder="What are you looking for?"> 
 
     <div class="input-group-btn"> 
 
     <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> 
 
     </button> 
 
     <ul class="dropdown-menu dropdown-menu-right dropdown-menu-search"> 
 
      <li> 
 
      <a href="#" class="small" data-value="option1" tabIndex="-1"> 
 
       <input type="checkbox" />&nbsp;Option 1</a> 
 
      </li> 
 
      <li> 
 
      <a href="#" class="small" data-value="option2" tabIndex="-1"> 
 
       <input type="checkbox" />&nbsp;Option 2</a> 
 
      </li> 
 
      <li> 
 
      <a href="#" class="small" data-value="option3" tabIndex="-1"> 
 
       <input type="checkbox" />&nbsp;Option 3</a> 
 
      </li> 
 
      <li> 
 
      <a href="#" class="small" data-value="option4" tabIndex="-1"> 
 
       <input type="checkbox" />&nbsp;Option 4</a> 
 
      </li> 
 
      <li> 
 
      <a href="#" class="small" data-value="option5" tabIndex="-1"> 
 
       <input type="checkbox" />&nbsp;Option 5</a> 
 
      </li> 
 
      <li> 
 
      <a href="#" class="small" data-value="option6" tabIndex="-1"> 
 
       <input type="checkbox" />&nbsp;Option 6</a> 
 
      </li> 
 
     </ul> 
 
     <button role="button" class="btn btn-lg btn-default btn-search"><span class="glyphicon glyphicon-search"></span> Search</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>