What is the process for setting the opacity of the background in ::selection to 1?

Is it possible to have selected text with a solid background rather than a transparent one? Using opacity: 1 does not achieve the desired effect due to some standard override by the browser or other factors.

::-moz-selection {
  background: #fff;
  color: #000;
}

::selection {
  background: #fff;
  color: #000;
}

body {
  color: #fff;
  font-family: sans-serif;
  line-height: 2em;
}

div {
  padding: 2em;
  background: #F8372A;
  text-align: center;
}
<div>
  <h1>HEY!</h1>
  <p>why is my background not<br/><strong>STARK WHITE</strong><br/>when selected?</p>
</div>

Answer №1

Experimented with setting

background-color: rgba(255,255,255,0.99);
for the ::selection pseudo-element and successfully achieved the desired outcome:

http://jsfiddle.net/Hc25u/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am unable to utilize the map function as it results in a TypeError: The property 'map' is undefined and cannot be read

I recently delved into the world of "REACT" in order to work on the front-end of my own project. I encountered a problem for 2 days with the map function while getting data from my back-end and saving the IDs in the Cuartos array. I couldn't figure ou ...

A method to eliminate the mouse-over effect following the selection of an input box

Currently, I am utilizing Angular and encountering three specific requirements. Initially, there is an input box where I aim to display a placeholder upon pageload as 'TEXT1'. This placeholder should then toggle on mouse hover to display 'TE ...

Looking for assistance with CSS | Implementing hover image with zoom effect

Currently, I have a page created using DIVI WordPress: My issue arises when attempting to implement a zoom effect on images upon hovering, as the image exceeds its designated div area. I attempted to utilize CSS code from this source: https://codepen.io/ ...

Is the media-heading situated at the base of the picture?

Wondering if it's possible to create a horizontal list of images with the image-heading under each image using Bootstrap 3. I couldn't find any information on this in the documentation. <h5 class="media-heading pull-left">One</h5> &l ...

Having trouble with GSAP CDN not functioning properly in your JavaScript or HTML document?

After watching a tutorial on YouTube by Gary Simon, I attempted to animate text using GSAP. Despite following the instructions meticulously and copying the CDN for GSAP and CSSRulePlugin just like him, nothing seems to be happening. Even setting my border ...

"Using jQuery's animate() function to dynamically change text content

I'm currently venturing into the world of jQuery animate() and decided to create a presentation-style project for practice. However, I've hit a roadblock when attempting to alter the text within my div element in the midst of an animation utilizi ...

Issue with WordPress navigation menu bug

On my website, I have implemented WP nav menu and it seems to be functioning correctly. However, I am facing an issue with the sub link under the home link. The screenshot shows the problem clearly. In the provided image, the "support our work" sub link a ...

As the text in the textarea grows, the dimensions of the div containing it will

When text is entered in the div, its height increases accordingly. However, I would like the height to also adjust based on the size of the text when I press enter. Additionally, I need the width to remain constant until the text reaches the maximum width ...

Align the bottom of an image with the top of text to achieve perfect vertical alignment

My goal is to arrange numerous images in a row, with text displayed below each image. Each block of text may consist of multiple lines and should be centered. While the heights of the images may vary, their widths will remain consistent. It is important th ...

Is AngularJS governed by a distinct set of guidelines for ARIA implementation?

I am currently working on updating a website to ensure compliance. The site is predominantly built using AngularJS, which I am still in the process of learning. I encountered an interesting situation where there is a label targeting a div element without a ...

"Drag and drop elements that automatically snap to a grid and move with

I'm trying to create a small, square div that follows the mouse cursor, but I want it to snap to a 3x3 pixel grid. Here is what I have so far: $(document).mousemove(function(e) { window.x = e.pageX; window.y = e.pageY; if(window.x % 9 === 0 ){ ...

Make the height of the CSS div fill the remaining space and allow scrolling once the maximum height of the screen is reached

I've scoured the internet high and low for a solution to my problem, but I just can't seem to find anything that fits my needs perfectly. The answers I have come across are either outdated or not quite what I'm looking for. I'm really h ...

What could be causing my input to not activate my function?

I am having issues with my input buttons not triggering my functions. Can anyone provide some insight into this problem? <div id="windowBar"> <h3>Imagine you were a superhero...</h3> <input id="WindowClose" type="button" onclick=" ...

Safari not fully supporting CSS translate functionality

When I click a button on my app, an element slides into view and then slides out when I click the button again. This is achieved using a combination of CSS and JS. It works perfectly in Chrome and Firefox, but only partially in Safari. In Safari, the elem ...

Choose a specific div element from a collection of dynamically generated divs in Angular

I have been working on a code to dynamically generate div elements using the *ngFor directive. Here is what I have so far: <div *ngFor = "let item of Items"> <p>Item : {{item}} </p> </div> The challenge I encountered is that w ...

Issues with Angular HTML failing to load correctly

Greetings, I am seeking assistance with an issue that has been challenging me for quite some time. As a newcomer to Angular JS, I may be overlooking something obvious. Here is the scenario: I am utilizing ng-repeat on a directive in the following manner: ...

Transform a flat 2D shape into a dynamic 3D projection using d3.js, then customize the height based on the specific value from ANG

Currently, I am utilizing d3.js version 6 to generate a 3D representation of the 2D chart shown below. Within this circle are numerous squares, each colored based on its assigned value. The intensity of the color increases with higher values. https://i.ss ...

Trouble with webpage design persists following recent modifications

Today, I decided to make some alterations on the header.php file of my WordPress website in order to tweak the flag icons displayed at the top of the page. However, when I refreshed the page, everything looked completely chaotic. Even after undoing all th ...

Execute the function when the control becomes visible

Currently, I possess an input control: <input id="someID" class="form-control" type="text" name="SomeData" data-ng-model="vm.SomeData"> I have a requirement to set the initial value of vm.SomeData upon user scrolling down to this control. As a begi ...

Is it possible to dynamically change an ngModel value directly from the component?

I'm currently immersed in an Angular project and my initial file setup was like this: dog.ts: export interface Dog { name: string; age: number; breed: string; } dog.component.ts: import { Dog } from '../dog'; @Component({ //setup ...