title: CSS - set the background color of ::selection in an INPUT or TEXTAREA in webkit / chrome?
body: <p>I'm trying to set the selection color on our site [for browsers that support this; unsupported will get the system default; looking for CSS-only &amp; won't implement JS for this]. </p>
  
  <p>The ::selection works fine (leaving out -moz for clarity here) on regular page text. However, I want the ::selection to also work on selected text within INPUT and TEXTAREA elements. The following works in Firefox (<a href="https://d3vv6lp55qjaqc.cloudfront.net/items/3f2m2S342i2a2V0z2C2W/Screen%20Shot%202013-08-21%20at%2012.34.54%20PM.png?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&amp;v=c618e057" rel="nofollow noreferrer">https://d3vv6lp55qjaqc.cloudfront.net/items/3f2m2S342i2a2V0z2C2W/Screen%20Shot%202013-08-21%20at%2012.34.54%20PM.png?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&amp;v=c618e057</a>) but does <em>not</em> work in webkit (chrome or safari), where I get the system-default light blue (<a href="https://d3vv6lp55qjaqc.cloudfront.net/items/1r2l1X1P2V3g031F152A/Screen%20Shot%202013-08-21%20at%2012.35.29%20PM.png?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&amp;v=c886aa70" rel="nofollow noreferrer">https://d3vv6lp55qjaqc.cloudfront.net/items/1r2l1X1P2V3g031F152A/Screen%20Shot%202013-08-21%20at%2012.35.29%20PM.png?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&amp;v=c886aa70</a>):</p>
  
  <pre><code>::selection { background: #f7a494; }
  input::selection {  background: #f7a494; }
  </code></pre>
  
  <p>I've looked around for -webkit overrides but haven't been able to find the relevant property.</p>