Login/Register
CSS - set the background color of ::selection in an INPUT or TEXTAREA in webkit / chrome?
Asked Answered
Solved csswebkit
E

4

13

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 & won't implement JS for this].

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 (https://d3vv6lp55qjaqc.cloudfront.net/items/3f2m2S342i2a2V0z2C2W/Screen%20Shot%202013-08-21%20at%2012.34.54%20PM.png?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&v=c618e057) but does not work in webkit (chrome or safari), where I get the system-default light blue (https://d3vv6lp55qjaqc.cloudfront.net/items/1r2l1X1P2V3g031F152A/Screen%20Shot%202013-08-21%20at%2012.35.29%20PM.png?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&v=c886aa70):

::selection { background: #f7a494; }
input::selection {  background: #f7a494; }

I've looked around for -webkit overrides but haven't been able to find the relevant property.

Eolithic answered 21/8, 2013 at 19:36 Comment(4)
Looks like this is a known webkit bug: bugs.webkit.org/show_bug.cgi?id=38943. Not sure if there are any updated properties or whatever that have gotten around the bug since its reporting? – Eolithic
+1 Looks like it was logged as a chrome bug about four years ago too code.google.com/p/chromium/issues/detail?id=62263 – Cleon
Was fixed at the beginning of 2014. code.google.com/p/chromium/issues/detail?id=62263 – Flaccid
I am running into the same problem... Only your solution for firefox does not work on 43.0.1. :/ Can't believe n one has answered this. I know I've seen it done before, I just can't think of where. – Thirtytwo
G
3

I have tested this on my Mac in Chrome 51.0.2704.103 and Safari 9.1.1(11601.6.17) and it seems this is no longer an issue. There is no need for input::selection like the OP has suggested, the code needed for this is:

::selection{
  background: #f7a494;
}

::-moz-selection{
  background: #f7a494;
}

If you are still having this issue try the following fiddle, if it works there may be something else in your code that is interfering with it.

https://jsfiddle.net/nLftpwjc/

Proof

enter image description here

Gathard answered 10/7, 2016 at 3:12 Comment(0)
A
0

If you want to hide text in inputs, add the same color to the text, focus and selection selectors for inputs like this...:

input[type="text"] {
    color: rgb(255, 255, 255);
}

input:focus {
    color: rgb(255, 255, 255);
}

input::selection {
    color: rgb(255, 255, 255);
}


const copyButtons = document.querySelectorAll(".copy-button");
const copyTexts = document.querySelectorAll(".copy-text");

copyButtons.forEach((copyButton, index) => {
  copyButton.addEventListener("click", () => {
    copyTexts[index].select();
    copyTexts[index].setSelectionRange(0, 99999);
    document.execCommand("copy");
    copyButton.classList.toggle("success");
    copyButton.innerHTML = "Copied!";
    setTimeout(function() {
      copyButton.classList.toggle("success");
      copyButton.innerHTML = "Copy it";
    }, 2000);
  });
});
input[type="text"] {
  color: rgb(255, 255, 255);
}

input:focus {
  color: rgb(255, 255, 255);
}

input::selection {
  color: rgb(255, 255, 255);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hidden text</title>
</head>

<body>
  <input type="text" name="hiddenByColor" class="copy-text" id="hiddenText" value="Tis text hidden by color" readonly>
  <button class="copy-button">Copy text</button>
  <br>
  <label for="hiddenText">You can select the text from input and copy anywhere you want:</label>
</body>

</html>
Aloha answered 5/10, 2023 at 18:59 Comment(0)
B
-1

bcz, WebKit follows the rgba instead of #123456

please try the following code:

input::selection { background:rgba(231,105,105,0.7) }
Biblical answered 21/8, 2013 at 19:49 Comment(1)
Didn't work. Also, webkit supports hex, rgb, and rgba for all other properties that I've come across, so I'd be surprised if that changed specifically for this one. – Eolithic
S
-3

I have just been looking around for this and have noticed you can just use a :focus selector to define the focused input field CSS. Like this then:

input:focus {  background: #f7a494; }

Hope this helps.

Sabulous answered 26/10, 2014 at 9:6 Comment(1)
This just changes the background color of the input, not the background color of the selected part which is what OP needs. – Ramify

© 2022 - 2024 — McMap. All rights reserved.