Zmiana wskaźnika ładowania początkowego (koloru i położenia)

Question

Czy ktoś może mi pomóc: chcę zmienić kolor karetki i uczynić go nie względnym z tekstu wejściowego, ponieważ trudno jest sprawić, aby wyglądał dobrze, gdy jest.

Answer 1

Mogę to zrobić na dwa sposoby. Jeśli chcesz to mieć wpływ na wszystkie jest kursor na swoim miejscu (prawdopodobnie nie jest to korzystne), a następnie można zastąpić klasę daszek css w was:

.caret{border-top:4px solid red;} 

Innym rozwiązaniem jest utworzenie niestandardowej klasy i dodać go do karetki w swojej markup

.red{border-top:4px solid red;} 

<div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action<span class="caret red"></span></button> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 

oryginalny JSFiddle został zaktualizowany http://jsfiddle.net/whoiskb/pE5mQ/

Answer 2

Nie jest to najlepszy sposób, ale to powinno działać:

Dodaj to do arkusza stylów (CSS) po Bootstrap to.

.btn-primary .caret, .btn-warning .caret, .btn-danger .caret, .btn-info .caret, .btn-success .caret, .btn-inverse .caret { 

    border-top-color: red; 

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    -moz-opacity:1; 
    -khtml-opacity: 1; 
    opacity: 1; 
} 

Answer 3

działa na Wordpress Bootstrap

// Caret color 
.navbar .nav li.dropdown > .dropdown-toggle .caret { 
    border-bottom-color: #FFFFFF; 
    border-top-color: #FFFFFF; 
} 

Answer 4

Znalazłem to proste rozwiązanie, aby zmienić pozycję karetki.

//example of moving curser 20 pixels to the right 
input { 
    padding-left: 20px; 
    padding-right: -20px; 
} 

Answer 5

Patrz na to stanowisko: How do CSS triangles work?

Na przykład, standard "w dół" strzałka dostarczone przez bootstrap wykorzystuje następujące style:

<span class="caret"></span> 

.caret { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    margin-left: 2px; 
    vertical-align: middle; 
    border-top: 4px solid #000000; 
    border-right: 4px solid transparent; 
    border-bottom: 0 dotted; 
    border-left: 4px solid transparent; 
    content: ""; 
} 

Tu właśnie transpozycji granicami trochę , a teraz jest strzałką "w górę". To samo podejście można zrobić dla prawych i lewych opiekunów.

<span class="up_caret"></span> 

.up_caret { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    margin-left: 2px; 
    vertical-align: middle; 
    border-bottom: 4px solid #000000; 
    border-left: 4px solid transparent; 
    border-top: 0 dotted; 
    border-right: 4px solid transparent; 
    content: ""; 
} 

Mam nadzieję, że to pomoże!

Answer 6

Innym sposobem na zmianę koloru jest skonfigurowanie bootstrap, jak chcesz na: http://getbootstrap.com/customize/

Dla karetki zmiany koloru: Dropdowns -> @ rozwijanej-karetki kolorze

następnie przejść do dnie i kliknij "Kompiluj & Pobierz", aby uzyskać niestandardową wersję bootstrap.

Ale uwaga @ rozwijana-daszek-kolor jest przestarzała od v3.1.0

Answer 7

Jeśli chcesz tylko zmienić kolor samej karetki, a nie wielkości lub pozycji, niektóre proste CSS działa dobrze (To jest Bootstrap 3.3.6 i Wordpress 4.5.2):

a span.caret { 
    color: #666 
}