CSS to Remove Text Shadow on Select/Highlight Text (Mozilla)

css to remove text shadow on select / highlight text (mozilla)

It seems like the problem was due to grouping multiple css rules (for the vendor specific css) together in conjuntion with the ::selection pseudo element.

I originally thought that it was sufficient to write each statement on a separate line.

I was mistaken.

So if I replace this code:

::-moz-selection,
::selection {
    text-shadow: none;
    background: #333;
    color: #fff;
}

..With this code:

::-moz-selection
{
    text-shadow: none;
    background: #333;
    color: #fff;
}
::selection {
    text-shadow: none;
    background: #333;
    color: #fff;
}

.... bingo, it works.

FIDDLE

Support is also very good (for desktop): Caniuse

Also, if you use LESS or SASS - you could easily write a mixin to get around the repitition.

CSS pseudo selection not changing text-shadow property

Chrome fails in the case of a textarea. It works ok for p.
That is the reason that the examples that you link are working

p {  background: #778899;  color: #FFFFFF;  text-shadow: 0 0 5px #000000;  font-size: 50px;}.fortext::-moz-selection {  background: #FFFFFF;  color: #000000;  text-shadow: none;}.fortext::selection {  background: #FFFFFF;  color: #000000;  text-shadow: none;}

<p class="fortext">Test</p>

Text Stroke and Shadow CSS3 in Firefox

The text-stroke property isn't part of the standard CSS spec, so it's best to avoid it - Chrome would be well within their rights to pull out it at any time.

You're right that you can create text-stroke-like effects using multiple comma-separated text-shadows - in fact you can use the same technique to add an 'actual' shadow as well:

h1 {  font-size: 6em;  font-weight: bold;  text-shadow: 1px  1px 0   #F00,              -1px -1px 0   #F00,               1px -1px 0   #F00,              -1px  1px 0   #F00,               3px  3px 5px #333;}

<h1 style="margin:0">Hello World</h1>

remove inner shadow of text input

border-style:solid; will override the inset style. Which is what you asked.

border:none will remove the border all together.

border-width:1px will set it up to be kind of like before the background change.

border:1px solid #cccccc is more specific and applies all three, width, style and color.

Example: https://jsbin.com/quleh/2/edit?html,output

How to remove the border highlight on an input text element

Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.

In your case, try:

input.middle:focus {
    outline-width: 0;
}

Or in general, to affect all basic form elements:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

---

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}

CSS highlight/selection color based on page focus

@feelinferrety the answer is NO.

You can't change selection highlight colors on out-of-focus window. at least as of now (January 2019)

As this explains how to do it on focused window using ::selection | ::-moz-selection

https://css-tricks.com/almanac/selectors/s/selection/

This clearly states that :window-inactive | :-moz-window-inactive will in fact work, BUT they don't work together ... because it's not standardized and therefore not developed

https://css-tricks.com/window-inactive-styling/

Although interesting is that you can for example change background-color of half of the page when the window goes out of focus...

Remove outline from select box in FF

I found a solution, but it is mother of all hacks, hopefully it will serve as a starting point for other more robust solutions. The downside (too big in my opinion) is that any browser that doesn't support text-shadow but supports rgba (IE 9) won't render the text unless you use a library such as Modernizr (not tested, just a theory).

Firefox uses the text color to determine the color of the dotted border. So say if you do...

select {
  color: rgba(0,0,0,0);
}

Firefox will render the dotted border transparent. But of course your text will be transparent too! So we must somehow display the text. text-shadow comes to the rescue:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

We put a text shadow with no offset and no blur, so that replaces the text. Of course older browser don't understand anything of this, so we must provide a fallback for the color:

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

This is when IE9 comes into play: it supports rgba but not text-shadow, so you will get an apparently empty select box. Get your version of Modernizr with text-shadow detection and do...

.no-textshadow select {
  color: #000;
}

Enjoy.

Element with shadow root breaks text selection

The bug report I filed in reaction to the findings in this question has been closed as a duplicate of this bug.

The last comments on that 2nd bug report are shedding some light on this:

Q: Too late for a fix in 70 but as we're seeing some duplicates, could you take another look and maybe aim for a fix in 72? Or is this part of some bigger project?

A: Implementing different Selection handling when Shadow DOM is enabled is a massive task, and that work is ongoing.
(Selection handling with Shadow DOM isn't really specified)

So to answer your question, by the looks of it text selection handling in conjunction with shadow DOM seems to be a) unspecified territory, and b) kind of difficult to implement.

At least there's agreement on that the current handling in Firefox is not what they want it to be.

How to remove Firefox's dotted outline on BUTTONS as well as links?

button::-moz-focus-inner {
  border: 0;
}

Remove new Firefox autofill color

Firefox 94 and newer

Just change the input's background color in your css:

input:autofill {
  background: #fff; /* or any other */
}

If you wish to remove the autofill background only in your Firefox browser, set layout.css.autofill.background to false in about:config.

Firefox 67 (2019-05-21) - 94 (2021-11-02; excluding)

Add this to your css:

input {
  filter: none;
}

Why? At the bottom of view-source:resource://gre-resources/forms.css we can see this:

:-moz-autofill, :-moz-autofill-preview {
  filter: grayscale(21%) brightness(88%) contrast(161%) invert(10%) sepia(40%) saturate(206%);
}

And that is the cause of the yellow autofill background color.

---

Related Topics