Вопрос по twitter-bootstrap, caret – Смена каретки начальной загрузки (цвет и положение)

19

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

Ваш Ответ

7   ответов
0

Нашел это простое решение, чтобы изменить положение каретки.

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

Это работает для Wordpress Bootstrap

// Caret color
.navbar .nav li.dropdown > .dropdown-toggle .caret {
    border-bottom-color: #FFFFFF;
    border-top-color: #FFFFFF;
}
если вы хотите отредактировать bootstrap.css вместо того, чтобы просто добавить новый класс для его переопределения, как я, то это способ сделать это.
1

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

Добавьте это в свою таблицу стилей (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;
}
Кроме того, я не могу заставить активную навигационную таблетку не менять цвет. Не могу найти соответствующий атрибут. skrypalyk
Спасибо! А как насчет позиционирования каретки? Как я мог решить мою проблему? skrypalyk
0

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

a span.caret {
  color: #666
}
5

Обратитесь к этому сообщению:Как работают 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: "";
}

Надеюсь это поможет!

Это помогло мне, большое спасибо.
31

Есть два способа сделать это. Если вы хотите, чтобы это влияло на все вставки на вашем сайте (вероятно, не предпочтительнее), вы можете переопределить класс вставки 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/

А как насчет позиционирования каретки? Как я мог решить мою проблему? skrypalyk
Не уверен, где вы хотели бы разместить каретку, поэтому я не уверен, что вы ищете там.
Все в порядке. Я просто сделал разные классы для разных выпадающих. skrypalyk
Чтобы изменить цвет активной таблетки nav, вам нужно переопределить активные классы, связанные с пилюлей. Вы можете увидеть пример здесь:jsfiddle.net/whoiskb/pE5mQ
Кроме того, я не могу заставить активную навигационную таблетку не менять цвет. Не могу найти соответствующий атрибут. skrypalyk
0

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

Для изменения цвета каретки: Dropdowns - & gt; @ Выпадающий-каретка цвета

затем перейдите в конец сайта и нажмите "Компилировать". Загрузить & Quot; чтобы получить вашу собственную версию начальной загрузки.

But note @dropdown-caret-color is deprecated as of v3.1.0

Похожие вопросы