21

カレットの色を変えて、入力テキストから相対的ではないようにしたいのですが、そうすると見栄えが悪くなります。

4

7 に答える 7

31

私がこれを行った2つの方法があります。これをサイトのすべてのキャレットに影響を与えたい場合（おそらく好ましくない）、あなたのキャレット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/

于 2012-05-29T17:55:55.007 に答える
8

これはWordpressブートストラップで機能します

// Caret color
.navbar .nav li.dropdown > .dropdown-toggle .caret {
    border-bottom-color: #FFFFFF;
    border-top-color: #FFFFFF;
}
于 2013-03-16T09:58:55.980 に答える
7

この投稿を参照してください：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: "";
}

お役に立てれば！

于 2013-09-18T22:24:47.840 に答える
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;
}
于 2012-05-29T17:33:42.323 に答える
0

カレットの位置を変更するためのこの簡単な解決策を見つけました。

//example of moving curser 20 pixels to the right
input { 
    padding-left: 20px;
    padding-right: -20px;
}
于 2013-04-20T23:55:26.457 に答える
0

色を変更する別の方法は、http： //getbootstrap.com/customize/で好きなようにブートストラップを構成することです。

カレットの色を変更する場合：ドロップダウン-> @ dropdown-caret-color

次に、サイトの下部に移動し、[コンパイルしてダウンロード]をクリックして、カスタムブートストラップバージョンを取得します。

ただし、@dropdown-caret-colorはv3.1.0で非推奨になっていることに注意してください

于 2014-05-13T15:39:49.680 に答える
0

サイズや位置ではなく、カレット自体の色のみを変更したい場合は、いくつかの単純なCSSが正常に機能します（これはBootstrap3.3.6およびWordpress4.5.2です）。

a span.caret {
  color: #666
}
于 2016-05-19T18:49:31.110 に答える