{"id":259152,"date":"2017-08-18T08:55:08","date_gmt":"2017-08-18T15:55:08","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=259152"},"modified":"2021-01-27T08:03:30","modified_gmt":"2021-01-27T16:03:30","slug":"caret-color","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/caret-color\/","title":{"rendered":"caret-color"},"content":{"rendered":"\n<p>The <code>caret-color<\/code> property in CSS changes the color of the cursor (caret) in inputs, texareas, or really any element that is editable, like:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">input,\ntextarea,\n[contenteditable] {\n  caret-color: red;\n}<\/code><\/pre>\n\n\n\n<p>The color of the caret generally matches the <code>color<\/code> of the text, but this property allows you to change those independently.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BdYmjz\" src=\"\/\/codepen.io\/anon\/embed\/BdYmjz?height=450&amp;theme-id=1&amp;slug-hash=BdYmjz&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BdYmjz\" title=\"CodePen Embed BdYmjz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wqqooq\" src=\"\/\/codepen.io\/anon\/embed\/wqqooq?height=450&amp;theme-id=1&amp;slug-hash=wqqooq&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wqqooq\" title=\"CodePen Embed wqqooq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"faking-it\">Faking it<\/h3>\n\n\n<p>Before this existed there was a method for faking it involving forcing the text to be transparent (where supported via <code>-webkit-text-fill-color<\/code>) and making the text show back up, colorized, via <code>text-shadow<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OMrMMp\" src=\"\/\/codepen.io\/anon\/embed\/OMrMMp?height=450&amp;theme-id=1&amp;slug-hash=OMrMMp&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OMrMMp\" title=\"CodePen Embed OMrMMp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-caret-color\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">57<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">53<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">11.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">11.3-11.4<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-259152\">\n\n  <time datetime=\"2021-01-27\" title=\"Originally published Aug 18, 2017\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 27, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/caret\/\">\n      caret    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/caret\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { caret: #ff7a18 underscore; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/caret-color\/\" rel=\"tag\">caret-color<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/forms\/\" rel=\"tag\">forms<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-259152\">\n\n  <time datetime=\"2021-01-27\" title=\"Originally published Aug 18, 2017\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 27, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/caret-shape\/\">\n      caret-shape    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/caret-shape\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { caret-shape: block; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/caret-color\/\" rel=\"tag\">caret-color<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/forms\/\" rel=\"tag\">forms<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The caret-color property in CSS changes the color of the cursor (caret) in inputs, texareas, or really any element that is editable, like: The color of the caret generally matches the color of the text, but this property allows you to change those independently.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13915,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1329,595],"acf":[],"jetpack-related-posts":[{"id":333467,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/caret\/","url_meta":{"origin":259152,"position":0},"title":"caret","date":"January 27, 2021","format":false,"excerpt":"caret in CSS is a shorthand property that combines the caret-color and caret-shape properties into a single declaration. So, we get to write this: .element { caret: #ff7a18 underscore; } ...which is akin to writing this: .element { caret-color: #ff7a18; caret-shape: underscore; } That's a nice shortcut when you want\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":242706,"url":"https:\/\/css-tricks.com\/snippets\/css\/typewriter-effect\/","url_meta":{"origin":259152,"position":1},"title":"Typewriter Effect","date":"July 11, 2016","format":false,"excerpt":".typewriter h1 { overflow: hidden; \/* Ensures the content is not revealed until the animation *\/ border-right: .15em solid orange; \/* The typwriter cursor *\/ white-space: nowrap; \/* Keeps the content on a single line *\/ margin: 0 auto; \/* Gives that scrolling effect as the typing happens *\/ letter-spacing:\u2026","rel":"","context":"With 78 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333380,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/caret-shape\/","url_meta":{"origin":259152,"position":2},"title":"caret-shape","date":"January 27, 2021","format":false,"excerpt":"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\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":17004,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/support-tabs-in-textareas\/","url_meta":{"origin":259152,"position":3},"title":"Support Tabs in Textareas","date":"May 13, 2012","format":false,"excerpt":"Normally the tab key moves to the next focusable thing. This inserts a tab character in instead. HTMLTextAreaElement.prototype.getCaretPosition = function () { \/\/return the caret position of the textarea return this.selectionStart; }; HTMLTextAreaElement.prototype.setCaretPosition = function (position) { \/\/change the caret position of the textarea this.selectionStart = position; this.selectionEnd = position;\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13911,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/appearance\/","url_meta":{"origin":259152,"position":4},"title":"appearance","date":"August 31, 2011","format":false,"excerpt":"The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme. .thing { -webkit-appearance: value; -moz-appearance: value; appearance: value; } This is starting to be unprefixed, which is great because the cross-browser story here is very complicated. The appearance property is\u2026","rel":"","context":"In \"appearance\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14152,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/attribute\/","url_meta":{"origin":259152,"position":5},"title":"[attribute]","date":"September 6, 2011","format":false,"excerpt":"There are lots of ways you can select elements in CSS. The most basic selection is by tag name, like p { }. Almost anything more specific than a tag selector uses attributes \u2014 class and ID both select on those attributes on HTML elements. But class and ID aren't\u2026","rel":"","context":"With 26 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/259152"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=259152"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/259152\/revisions"}],"predecessor-version":[{"id":333528,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/259152\/revisions\/333528"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13915"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=259152"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=259152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}