Изменение каретки bootstrap (цвет и положение)

Я хочу изменить цвет каретки и сделать его не относительным от входного текста, потому что трудно заставить его выглядеть хорошо, когда это так.

19
caret twitter-bootstrap

7 ответов

есть два способа, которыми я это сделал. Если вы хотите, чтобы это повлияло на все каретки на вашем сайте (вероятно, не предпочтительно), то вы можете переопределить класс CSS каретки в вас:

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

другой вариант-создать пользовательский класс и добавить его в каре в разметке

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

оригинальный JSFiddle был обновлен http://jsfiddle.net/whoiskb/pE5mQ/

31

это работает для WordPress Bootstrap

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

обратитесь к этому сообщению:как работают CSS треугольники?

например, стандартная стрелка" вниз", предоставляемая bootstrap, использует следующий стиль:

<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: "";
}

здесь я только что немного переместил границы, и теперь это Стрелка "вверх". То же самое можно сделать и с правым и левым каретками.

<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: "";
}

надеюсь, что это помогает!

5

Не лучший способ, но он должен работать:

добавьте это в таблицу стилей (CSS)после включения начальной загрузки.

.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;
}
1

найдено это простое решение для изменения положения каретки.

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

другой способ изменить цвет-настроить bootstrap, как вам нравится: http://getbootstrap.com/customize/

для изменения цвета каретки: Выпадающие меню - > @dropdown-caret-color

затем перейдите в нижнюю часть сайта и нажмите "Compile & Download", чтобы получить пользовательскую версию bootstrap.

но обратите внимание, что @ dropdown-caret-color устарел с версии v3.1.0

0

Если вы хотите изменить только цвет самого каретки, а не размер или положение, некоторые простые CSS отлично работают (это Bootstrap 3.3.6 и Wordpress 4.5.2):

a span.caret {
  color: #666
}
0