Menu
I want to change color of caret and make it not relative from input text, because it's hard to make it look good when it is.
973
The caret-color property specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable.
The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted. This is sometimes referred to as the text input cursor. The caret appears in elements such as <input> or those with the contenteditable attribute.
The caret-shape property in CSS changes the shape of the text cursor inside editable elements that indicates a user is typing. It's part of the CSS Basic User Interfaces Module Level 4, which is currently in Working Draft status. As I write, the caret is the little blinking bar that follows each character I type.
A caret (sometimes called a "text cursor") is an indicator displayed on the screen to indicate where text input will be inserted. Most user interfaces represent the caret using a thin vertical line or a character-sized box that flashes, but this can vary. This point in the text is called the insertion point.
There are two ways I have done this. If you want this to affect all carets on your site (probably not preferred) then you could override the caret css class in you:
.caret{border-top:4px solid red;} Another option is to create a custom class and add it to the caret in your markup
.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> The original JSFiddle has been updated http://jsfiddle.net/whoiskb/pE5mQ/
66
This works for Wordpress Bootstrap
// Caret color .navbar .nav li.dropdown > .dropdown-toggle .caret { border-bottom-color: #FFFFFF; border-top-color: #FFFFFF; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
