jak stylizować pole wejściowe w twitterze bootstrap?

Question

Mam do zaznaczenia pole wyboru proste, ale nie mogłem znaleźć jakiejś opcjonalnej klasy w bootstrap, również szukałem na github jakiejś bibliotece i nie mogłem znaleźć niczego prostego jak zrobienie fundamentu.

Dzięki za pomoc.

Answer 1

Wystarczy dodać identyfikator (jeśli jest to tylko jedno pole) lub klasa do tego elementu wejściowego i zdefiniować css dla niego:

CSS i HTML

„customId” byłoby identyfikator dajesz tag zwyczaj wprowadzania:

<input id="customId" /> 

input#customId{ 
    background: #888 !important; 
    border: none !important; 
    color: #000 !important; 
} 

jsut nadpisać whatver style chcesz ...

wAŻNE: wystarczy dodać ważne do końca stylu zmusić nadpisanie

Answer 2

Można grać z tym, aby zorientować się, co można zrobić:

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
@import url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css'); 
 

 
input[type="checkbox"] { 
 
    display: none; 
 
} 
 

 
.custom-check { 
 
\t \t display: inline-block; 
 
\t \t width: 25px; height: 25px; 
 
\t \t background: white; 
 
\t \t border: 1px solid #CCCCCC; 
 
\t \t font-family: 'Glyphicons Halflings'; 
 
\t \t font-size: 22px; 
 
\t \t line-height: 1; 
 
\t } 
 

 
.custom-check::before { 
 
    content: "\e013"; 
 
    color: #424242; 
 
    display: none; 
 
} 
 

 
input[type=checkbox]:checked+.custom-check::before { 
 
    display: block; 
 
    color: white; 
 
    background-color: #554236; 
 
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> 
 
<div> 
 
    <label > 
 
    <input type="checkbox"> 
 
    <span class="custom-check"></span> 
 
    My Checkbox 
 
    </label> 
 
</div>

Jeśli to nie wystarczy, to answer do podobnego pytania również daje dobry przegląd css zaangażowany w dostosowywanie pola wyboru bootstrap.