How to fix custom HTML cursor issue on a web page?

Question

I'm developing an innovative app to protect user passwords. It's an award winning system called GATE [ you can read about it on the following site if you are interested ], and I need to have a custom cursor when I enter my info.

When I get to a login screen, it will show me a table with multiple buttons in it. Each button has 4 symbols on it. I can click the buttons to enter my pin. In order not to expose which symbol I'm clicking on, I need a custom cursor to mask the symbols on the button.

But I have the following 2 problems:

The custom cursor sometimes don't show up, how to make it always show up especially when it's over a button.
The mouse is positioned at the upper left corner of the custom cursor, how to position the mouse to the center of the custom cursor ?

My HTML code looks like this:

<Head>
  <Title>GATE_Servlet</Title>
<style>.Tokens_Table {cursor: url(Cursor_Crosshair.cur),url(Cursor_Select.cur),url(Cursor_Empty.cur),auto;}</style>
</Head>

<Body BgColor=#C6DAFA>

<Center>
<P><Br>
<Div class="Tokens_Table">
<Table Border=0 Cellspacing=10 Cellpadding=10>
  <Tr>
    <Td Align=Center><button id=Token_0_0 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>2</f></Td><Td Width=25 Align=Center><f>Ⓕ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>☴</f></Td><Td Width=25 Align=Center><f>₠</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_0_1 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>25</f></Td><Td Width=25 Align=Center><f>δ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>☾</f></Td><Td Width=25 Align=Center><f>$</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_0_2 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>30</f></Td><Td Width=25 Align=Center><f>α</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>♥</f></Td><Td Width=25 Align=Center><f>&</f></Td></Tr>  </Table></Center></button></Td>
  </Tr>
  <Tr>
    <Td Align=Center><button id=Token_1_0 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>23</f></Td><Td Width=25 Align=Center><f>π</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>◒</f></Td><Td Width=25 Align=Center><f>☣</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_1_1 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>37</f></Td><Td Width=25 Align=Center><f>Ⓢ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>☷</f></Td><Td Width=25 Align=Center><f>⊂</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_1_2 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>50</f></Td><Td Width=25 Align=Center><f>β</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>△</f></Td><Td Width=25 Align=Center><f>☟</f></Td></Tr>  </Table></Center></button></Td>
  </Tr>
  <Tr>
    <Td Align=Center><button id=Token_2_0 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>15</f></Td><Td Width=25 Align=Center><f>ο</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>♂</f></Td><Td Width=25 Align=Center><f>✉</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_2_1 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>24</f></Td><Td Width=25 Align=Center><f>ψ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>♣</f></Td><Td Width=25 Align=Center><f>♨</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_2_2 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>47</f></Td><Td Width=25 Align=Center><f>λ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>◑</f></Td><Td Width=25 Align=Center><f>₩</f></Td></Tr>  </Table></Center></button></Td>
  </Tr>
</Table>
</Div>
<P>
...
</Body>
</Html>

The demo app is running at:

https://gate-web.herokuapp.com/GATE_Servlet?User_Id=admin&Menu=Login

Before trying it, you need to know how it works first:

https://gate-web.herokuapp.com/how_gate_works.jsp

Those title-cased HTML tags look strange to me. Is this even valid? Probably depends on the DOCTYPE. — Uwe Keim
– Uwe Keim, Commented Jul 13, 2018 at 4:33
Your html is broken in so many ways. Also please remove the external links and add the minimal reproducible example here as a runnable snippet. Without complete example it will be really hard to help you. — Esko
– Esko, Commented Jul 13, 2018 at 5:17

Jason · Accepted Answer · 2018-07-13 05:17:56Z

1

Try this:

button {
    cursor: inherit !important;
}

.Tokens_Table {
    cursor: url(Cursor_Crosshair.cur) 40 40, auto;   /* 40 = half of width/height */
}

It seems that Chrome has a bug of CSS3 cursor, so the code below doesn't work:

cursor: url(Cursor_Crosshair.cur),url(Cursor_Select.cur),url(Cursor_Empty.cur) 40 40, auto;

answered Jul 13, 2018 at 5:17

Jason

5844 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Frank Over a year ago

Wonderful, this fix works perfectly, thank you ^_^ !

Frank Over a year ago

I just found a problem : it doesn't work in IE, because IE doesn't support [ x y ] parameter in the above line. So I solved the problem with my solution, which is a modified version of this answer, so I still want to thanks you !

Frank · Accepted Answer · 2018-07-13 17:54:09Z

Since IE doesn't support [ x y ] parameter in the "cursor" specification, I came up with another solution as follows.

I downloaded a software called "RealWorld Cursor Editor" from http://www.rw-designer.com/cursor-maker

Converted my cursor .png file to a mouse cursor file, then set the hotspot in that cursor file to the center of the cursor, and saved that .cur file.

Then used the following line in the html to use that .cur file [ which has a hotspot in the center ] :

<style>
  .Tokens_Table { cursor: url(Cursor_Crosshair.cur),url(Cursor_Select.cur),url(Cursor_Empty.cur), auto; }
  button { cursor: inherit !important; }
</style>

Now, it's working in all 3 major browsers : Firefox, IE & Chrome.

You can try it at : https://gate-web.herokuapp.com/index.jsp

Collectives™ on Stack Overflow

How to fix custom HTML cursor issue on a web page?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related