Solved

Hand cursor on HTML dropdown

Posted on 2007-11-17
15
2,564 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

773 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