Tips for customizing cursor within a CSS ::first-letter selector

My site's mouse cursor has not been customized in any way, so it is all default. When text is hovered over, the cursor changes into the "text select cursor" (ꕯ). However, after styling my first letters by changing their color, I noticed that they now display the default arrow cursor when hovered over. Despite trying to manually set a cursor using CSS, the rule seems to be ignored...

Here is the simple CSS rule I used to style the letters:

::first-letter{
    color: red;
}

I attempted to set a new cursor rule for it, but it did not work; even when setting it to none, the arrow cursor still appeared on the first letters.

::first-letter{
    cursor: none;
    color: red;
}

This issue is not related to selecting text or the blinking cursor from input text fields; it simply involves the visual change of the mouse cursor when hovering over text.

Answer №1

According to MDN:

There are limitations on the CSS properties that can be applied to the ::first-letter pseudo-element

cursor does not fall within these allowable 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

Dynamic Dropdown Validation During Form Submission

In the form, there are multiple rows displayed dynamically, each with a dropdown menu. The id for each dropdown is "ReasonCd#" where "#" increments from 0 based on the row number. By default, every dropdown has "Select Number" as the selected option, with ...

Is there a way to retrieve the ID from a span and convert it into a string format?

let wordSpan = '<span class="we w_o_r_d_s" id="we" contenteditable="false">we</span>' console.log(wordSpan.id); console.log(wordSpan.attr('id')); console.log(wordSpan.getAttribute('id')); let newDiv = document.c ...

Update links within a designated div section

How can I change the color and alignment of anchor tags within the third child div that is part of a set of three nested divs? These child divs are arranged side by side within a parent div with the class .logo-bckgrnd-rpt. Although I have successfully tar ...

Make sure to consistently show the rating bubble within the md-slider

I am currently exploring the functionality of md-slider in its md-discrete mode. However, I would like to have the slider bubble always visible on the screen, similar to this: I do not want the slider bubble to disappear when clicking elsewhere. Is there ...

Issues with Bootstrap's center-block functionality

I'm having trouble centering the navigation in my WordPress template that uses Bootstrap. I've tried using the center-block class on different elements, but the menu items are still aligning to the left. I even created a custom class in my custom ...

Launching Firefox using Bootstrap on a Mac for media query breakpoints

I'm facing a major issue with my website. Running on Mac OS with Firefox version 29 (and previous versions). The site is responsive and built with Bootstrap. It functions perfectly on all browsers EXCEPT... On Mac using FF, right at the point where ...

Every time I adjust the browser height on my landing page, the elements start to overlap each other

Something strange is happening - as I shorten the height of the browser, elements on the page start to overlap. I've tried using Firebug to troubleshoot, but haven't had any luck so far. Maybe someone here can help me out! EDIT: It seems that e ...

What is the best way to conceal padding designated for invisible scrollbars?

I am facing a perplexing problem with a nav element that always shows an empty scrollbar area, even when it is not required. Here is how it looks with all content displayed: https://i.stack.imgur.com/PzeiP.png This is how it appears when the window heigh ...

Issues with media queries not being responsive

Struggling to finalize the design of this website The font-face for the header in the menubar (at the top sof style.css) is not working. The media queries (at the bottom of style.css) are not working. Despite trying various solutions from stackoverflow a ...

Xpath is effective in Chrome Dev Tools, but does not seem to be functioning properly in RS

I am currently engaged in a project that involves extracting an HTML table containing specific text ("Current Prison History:") from various URLs that vary based on individual ID. I have attempted to utilize CSS selectors for this task, but encountered a c ...

Error in INSERT INTO statement

There seems to be an issue with my insert into line, specifically this part mysql_query("INSERT INTO accounts('username', 'password', 'firstname', 'lastname', 'email') VALUES($username, $password, $firstn ...

I can't get Toggleclass to switch classes properly, am I missing something?

I have been experimenting with creating a button that toggles a class and reveals another div below it. Feel free to check out the example on jsFiddle that I created for you. While the first function of showing and hiding the div is working perfectly, I ...

Display Bootstrap radios horizontally when the screen size is small or larger, and vertically when the screen

After reviewing the Bootstrap documentation for styling checkboxes and radios, I am searching for a solution to have my radios displayed horizontally on small screens or larger, and vertically on extra small screens. The approach described in the Bootstr ...

Problem with rendering Ionic v2 HTML in Angular 2

Issue at Hand: Currently, I am developing a hybrid app using Ionic v2 and everything seems to be functioning correctly. When I use ionic serve, the app works as expected in the browser with no issues. However, when I try running the app on an Android devi ...

Transform a button into an AngularJS directive

Is there a way to create a custom directive in HTML to represent a button? For example: <buy-button></buy-button> Here is the code that I would like to change: <md-button class="md-cornered" ng-disabled="0>=gains" ...

Adjust the image's height to adapt to the size of the browser

I'm having trouble resizing the images to match the height of the browser window. My goal is to limit the images' height to a maximum of 1100px and have them scale down based on the height of the browser. I've experimented with setting the ...

What is the best way to center text alongside an SVG component?

Greetings to all the problem-solving magicians out there! I've found myself in a bit of a pickle that has turned into a staring contest with VS Code. It's been quite the showdown, haha. So here's the deal - I created a fancy website UI in A ...

Display dynamic HTML content using Angular data binding

As I work on my blog, I have the basic structure set up and can successfully display pages. One question I have pertains to the main index.html page where I include: <html ng-app="BlogApp"> ... <div ng-view></div> </html> My main ...

Having trouble with the repeat-item animation feature not functioning correctly

Take a look at this Plunker, where the animation for adding an item only seems to work properly after an item has been deleted from the list. Any suggestions on how to resolve this issue? Here is the CSS code: .repeat-item.ng-enter, .repeat-item.ng-leave ...

The display attribute is malfunctioning in Internet Explorer when trying to style Font Awesome icons

When viewed in IE 11 with CSS properties applied After disabling the display property, the result changes as shown below In the first screenshot, the icon is present but not visible. I want to keep the display:table-cell property for responsiveness. Can ...