Solved

Hand cursor on HTML dropdown

Posted on 2007-11-17
15
2,561 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
 
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now