更改引导插入符号（颜色和位置）

Posted 2023-03-06

技术标签:

【中文标题】更改引导插入符号（颜色和位置）【英文标题】：Changing bootstrap caret(color and position) 【发布时间】：2022-01-22 12:46:37 【问题描述】：

我想改变插入符号的颜色，使其与输入文本不相关，因为很难让它看起来很好。

【问题讨论】：

【参考方案1】：

不是最好的方法，但应该可以：

在 Bootstrap 包含后将其添加到您的样式表 (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;

【讨论】：

谢谢！那么插入符号的定位呢？我该如何解决我的问题？另外，我无法让活动导航药丸不改变颜色。找不到对应的属性。【参考方案2】：

我有两种方法可以做到这一点。如果您希望这影响您网站上的所有插入符号（可能不是首选），那么您可以覆盖您的插入符号 css 类：

.caretborder-top:4px solid red;

另一种选择是创建一个自定义类并将其添加到标记中的插入符号

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

【讨论】：

那么插入符号的定位呢？我该如何解决我的问题？另外，我无法让活动导航药丸不改变颜色。找不到对应的属性。要更改活动的导航药丸颜色，您必须覆盖与药丸相关的活动类。你可以在这里看到一个例子：jsfiddle.net/whoiskb/pE5mQ 不知道你想把插入符号放在哪里，所以我不确定你在哪里找什么。没关系。我只是为不同的下拉菜单制作了不同的类。【参考方案3】：

这适用于 Wordpress Bootstrap

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

【讨论】：

如果你想编辑 bootstrap.css 而不是像我一样只添加一个新类来覆盖它，那么这就是这样做的方法。【参考方案4】：

找到了这个简单的解决方案来改变插入符号的位置。

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

【讨论】：

【参考方案5】：

参考这个帖子：How do CSS triangles work?

例如，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: "";

希望这会有所帮助！

【讨论】：

你太棒了，你给了我插入符号的基本样式，并且能够完全按照我的意愿定制它......谢谢！【参考方案6】：

另一种更改颜色的方法是根据需要配置引导程序： http://getbootstrap.com/customize/

对于插入符号颜色更改：下拉菜单 -> @dropdown-caret-color

然后转到网站底部并单击“编译和下载”以获取您的自定义引导程序版本。

但请注意，@dropdown-caret-color 自 v3.1.0 起已弃用

【讨论】：

【参考方案7】：

如果您只想更改插入符号本身的颜色，而不是大小或位置，一些简单的 CSS 就可以正常工作（这是 Bootstrap 3.3.6 和 Wordpress 4.5.2）：