Currently, I have implemented a custom cursor set on my website in order to override the unattractive AA cursors found on most modern Operating Systems. Although I have successfully applied the custom pointer/cursor, I am encountering some challenges with setting the I-bar cursor for when users hover over or select text. Is there a simple and universal way to style all text elements on a webpage? I do not wish to only change the cursor to an I-bar when entering a div (as mentioned in a similar stackoverflow post); my goal is to specifically change it when hovering over text. Thank you.
body {
margin: 0 !important;
cursor: url(../images/cursors/cursor.png), default;
}
a:link:active {
cursor: url(../images/cursors/pointer_active.png), pointer ;
}
a:link {
cursor: url(../images/cursors/pointer.png), pointer ;
}
input[type=text], #text {
cursor: url(../images/cursors/text.png), text !important;
}