Using gradient colors for the background on the ::selection pseudo-element

Can you apply a gradient color to CSS ::selection?


I tried using the following code:

::selection {
  background-image: -webkit-linear-gradient(left, #ee4037 0%, #eb297b 100%);
}

However, it did not have the desired effect.

Answer №1

Not Allowed.

As stated on MDN

Only a limited number of CSS properties are permitted in a rule utilizing ::selection in its selector: color, background-color, cursor, outline, text-decoration, text-emphasis-color, and text-shadow. It should be noted that background-image is disregarded, just like all other properties.

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

Struggling to make `align-items="baseline"` function properly

I'm encountering an issue with alignment in my sandbox project. Specifically, I want the bottom of texts with different font sizes to be on the same y axis but I can't seem to figure out how to make it happen. Check out this picture to see exact ...

Searching for li elements that contain text values - a guide

I have a list of letters and I want to filter out any values that contain the text entered by the user in a textbox. Here is the design: Search List: <input type="text" id="txtSearch" /> <ul> <li>Coffee1</li> <li>Coffe ...

Issues with Bootstrap indicators and slide controls functionality are being experienced

I am currently exploring a method to create a carousel with thumbnails by referring to this example. I have followed their instructions closely, but unfortunately, clicking on the thumbnails and indicators does not seem to be working as expected. The onl ...

What is the process for including an SVG file in my JavaScript .textContent?

I've been struggling to add an exclamation SVG to this section, but for some reason I can't make it work. I've searched on Google for a solution, but haven't found one yet. The SVG file is already downloaded and stored in my project fo ...

Having trouble setting a background image for a specific DIV element in HTML

I am in the process of updating my webpage, and need some assistance implementing a small background image. Here is what I have done so far: https://i.sstatic.net/nTxtD.png Below is the marked section where I am trying to add the background image: https ...

Is it possible to place Angular Material components using code?

Currently, I'm in the process of creating a responsive Angular application. Is there any way to adjust the height and position of the <mat-sidenav-content></mat-sidenav-content> component in Angular Material programmatically without relyi ...

When attempting to use the ResponsiveSlides plugin, the functionality of 'Image links' seems to be disabled in the Chrome browser

While everything is functioning perfectly in Firefox and IE, I've encountered an issue with Chrome. It only works after right-clicking and inspecting the element; once I close the Inspector, it stops working - displaying just an arrow cursor as if the ...

What are some effective strategies for preventing CSS duplication?

What is the best way to prevent repeating CSS code like this: div#logo div:nth-child(1) div { width: 30%; height: 30%; background-color: white; } div#logo div:nth-child(3) div { width: 30%; height: 30%; background-color: white; ...

Having trouble adjusting the space between the footer and the bottom of the page

Looking to create a footer using multiple elements The first element should be positioned at: left: 944px; top: 9749px; The second element should be positioned at: left: 715px; top: 9819px; The third element should be positioned at: left: 718px; top: ...

Trouble with setting HTML table width

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <table border="1" width="100%"> <tr> <td>bbbbbbbbbbbbbbbbbbbbbbbbbbb ...

Choose a child using react material ui's makeStyles

Currently utilizing React and Material UI, I am attempting to use the nth-child selector with the MUI makeStyle function. However, it is not working as expected. Here are some screenshots for reference: https://i.sstatic.net/5dVhV.png https://i.sstatic.ne ...

col-md is taking precedence over col-sm at lower screen resolutions

Col-md takes precedence over col-sm in Bootstrap 4 https://i.sstatic.net/ydL5O.png ...

Lock GridView headers when only scrolling vertically

I am facing an issue with my gridview on an aspx page. The gridview is wider than the page itself, so I want the headers of the gridview to scroll horizontally along with the content, while remaining fixed vertically. Can anyone help me achieve this? I hav ...

Is there a way to extend a div to occupy two rows?

I am attempting to accomplish the following task: Here is my markup: <div> <div>A</div> <div>B</div> <div>C</div> </div> Can this be achieved using grid, bootstrap, or flex without altering the or ...

Tips for defining CSS styles for the background color of <td> elements within a sitemap

I am facing a similar issue to the one discussed in this thread Possible to fill a table cell with a bg color?. The challenge I am encountering is related to applying CSS styles to the td tags within a sitemap structure. (Although it functions correctly ...

Seeing the Bootstrap css load immediately upon the page loading and switching between pages

Upon loading my webpage or navigating between subpages, I've noticed that the Bootstrap.css styles are interfering with my CSS transitions. For some reason, my regular links appear orange initially, but they turn blue during loading or when transition ...

Some websites are not displaying the CSS code for the inspector

In my experience, I have always relied on Firefox Inspector to troubleshoot CSS issues without any problems. However, when I attempted to analyze the CSS of a specific webpage (only encountering difficulties while logged in), I noticed that the inspector ...

Ensure that the default value in the text box remains unchanged until new text is input by utilizing jQuery

Can you please review my code snippet on http://jsfiddle.net/7995m/? The issue I'm facing is that the default text in the text box disappears as soon as it's clicked. What I want is for the default text to remain until the user starts typing. Her ...

Tips for utilizing numerous tables with multiple selection tags

I am struggling with a jQuery issue involving multiple container elements with the class "product-sizes". Each container contains a select option for choosing between inches and centimeters, which triggers the corresponding table display. The problem arise ...

Is it possible to update the page title with JQuery or JavaScript?

Is it possible to modify the page title using a tag inside the body of the document with jQuery or JavaScript? ...