Может кто-нибудь мне помочь: я хочу изменить цвет каретки и сделать его не относительным от входного текста, потому что это трудно сделать, чтобы он выглядел хорошо, когда он есть.
Изменение цвета бутстрапа (цвет и положение)
Ответ 1
Есть два способа сделать это. Если вы хотите, чтобы это повлияло на всех пользователей на вашем сайте (возможно, это не было предпочтительным), вы можете переопределить класс CSS ccat:
.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/
Ответ 2
Это работает для Wordpress Bootstrap
// Caret color
.navbar .nav li.dropdown > .dropdown-toggle .caret {
border-bottom-color: #FFFFFF;
border-top-color: #FFFFFF;
}
Ответ 3
Обратитесь к этому сообщению: Как работают треугольники CSS?
Например, стандартная стрелка вниз, предоставленная бутстрапом, использует следующий стиль:
<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: "";
}
Надеюсь, это поможет!
Ответ 4
Не лучший способ, но он должен работать:
Добавьте это в таблицу стилей (CSS) после включения Bootstrap.
.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;
}
Ответ 5
Нашел это простое решение, чтобы изменить положение каретки.
//example of moving curser 20 pixels to the right
input {
padding-left: 20px;
padding-right: -20px;
}
Ответ 6
Другой способ изменения цвета - настроить загрузку, как вам нравится: http://getbootstrap.com/customize/
Для изменения цвета каретки: Dropdowns → @dropdown-caret-color
затем перейдите в нижнюю часть сайта и нажмите "Скомпилировать и загрузить", чтобы получить свою собственную версию начальной загрузки.
Но обратите внимание, что @dropdown-caret-color устарел от версии v3.1.0
Ответ 7
Если вы хотите изменить цвет самой каретки, а не размер или положение, некоторые простые CSS отлично работают (это Bootstrap 3.3.6 и Wordpress 4.5.2):
a span.caret {
color: #666
}