Solved

Hand cursor on HTML dropdown

Posted on 2007-11-17
15
2,566 Views
Last Modified: 2013-12-24
Dear experts,

I cannot explain my self why the following code does not show a "hand" cursor.

<select style="cursor:hand;"><option>something</option></select>

Why doesnt' it work?

Thnx in advance ;)
0
Comment
Question by:ChoobsTech
  • 6
  • 4
  • 3
  • +1
15 Comments
 
LVL 2

Expert Comment

by:ToastedWeb
ID: 20305009
that is very simple... because the right way is:

<select style="cursor:pointer;"><option>something</option></select>
0
 
LVL 2

Author Comment

by:ChoobsTech
ID: 20305075
As simple as it seems, it's not working on IE7.

<select style=\"cursor:pointer;\"><option>Doesn't work</option></select>

I want a cursor looking like a HAND (same as when you mouse over a html link)

<span style="cursor:hand;">
works
</span>

<select  style="cursor:hand;"><option>Doesn't work</option></select>

I tried several combinations, none is working. (The "right way" doesn't work either, at least on IE7)
0
 
LVL 2

Author Comment

by:ChoobsTech
ID: 20305181
<a href="javascript:void(0)"><select style="cursor:pointer;"><option>Doesn't work</option></select></a>

Or
<span style="cursor:hand;"><select style="cursor:pointer;"><option>Doesn't work</option></select></span>

Are not working either...
0
Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

 
LVL 12

Expert Comment

by:Rok-Kralj
ID: 20305260
try giving cursor:hand; to option tag.
0
 
LVL 12

Assisted Solution

by:Rok-Kralj
Rok-Kralj earned 150 total points
ID: 20305266
after googling I come to conclusion that it is not possible in IE.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 20305964
ChoobsTech,

I suspect its IE7.  ToastedWeb's code worked for me using both IE6 and Firefox.

If you try the cursors on this page do any of them work with IE7?
http://www.echoecho.com/csscursors.htm
0
 
LVL 2

Author Comment

by:ChoobsTech
ID: 20306438
To Rok-Kralj:
I already tried giving it to <option> without success, and for now I tend agree for now that it's not possible but I still hope to be proven wrong, which is the whole purpose of this opened question.

To _agx_:
They all work in IE7 but the point is to get them working with a <select>
0
 
LVL 52

Assisted Solution

by:_agx_
_agx_ earned 150 total points
ID: 20306504
Okay.  Just wanted to confirm that particular cursor works at all w/IE7.  

>  ToastedWeb's code worked for me using both IE6 and Firefox.

I have to take that back.  I ran another test.  The select list cursor does work with Firefox 2, but not for IE6.  For IE6 it seems to work only for _other_ elements, not select lists.  At least for me anyway.  So add my vote to the  "I suspect its not supported" column.

Good luck
0
 
LVL 2

Expert Comment

by:ToastedWeb
ID: 20306923
however, you should not use cursor styles on select element... that would be usability isue, since users
are used to the default cursor on select element...

my code does not work in IE6, sorry for the wrog answer.
0
 
LVL 2

Author Comment

by:ChoobsTech
ID: 20308951
To ToastedWeb:

I design an application closer to a desktop application with loads of AJAX, changing the size of the select when chosen, etc.

It already doesn't look much like a select anymore, and this is why the cursor should look like it's selectable.
0
 
LVL 2

Accepted Solution

by:
ToastedWeb earned 200 total points
ID: 20309098
I understandt your needs, but then again, maybe you could use some other method for this...  maybe you could create a multilevel menu...
0
 
LVL 2

Author Comment

by:ChoobsTech
ID: 20313695
Ok thnx for the help everyone ;)

I think topic should be closed as it doesn't seem to be possible... I think I'll head for some nice DOM table manipulation to make it look the same :D

I'll distribute points in the following manner:
ToastedWeb 3 posts -->200pts
Rok-Kralj 2 posts --> 150pts
_agx_ 2 posts -->150 pts

Grade will be C as no solution was found. Should you have any complaints, feel free to do so, I'm opened to criticism for next time ;)
0
 
LVL 2

Author Closing Comment

by:ChoobsTech
ID: 31409735
Simply not possible with IE7 at the moment.
0
 
LVL 2

Expert Comment

by:ToastedWeb
ID: 20313912
you did it the right way... i think...
0
 
LVL 52

Expert Comment

by:_agx_
ID: 20313938
ChoobsTech,

I wasn't expecting any points since I only reiterated what was stated by others. But I appreciate your open-mindedness and it was nice of you to want to award points ;)  

Personally I don't think a "C" was appropriate here for several reasons  

1) You asked about custom cursors on select list. You never asked about "simulating a select list" if custom cursors weren't possible.  

2) I suspect the answer you were given was correct: ie what you want to do isn't possible in your environment.  Its likely there's not much anyone can do about that :)

So asking asked additional questions, or maybe even asking for the question to be closed so you could re-phrase it would seem more appropriate IMO.

Just my $0.02 ;-)
0

Featured Post

Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

790 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question