Solved

Hand cursor on HTML dropdown

Posted on 2007-11-17
15
2,562 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
Superior storage. Superior surveillance.

WD Purple drives are built for 24/7, always-on, high-definition security systems. With support for up to 8 hard drives and 32 cameras, WD Purple drives are optimized for surveillance.

 
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

New! My Passport Wireless Pro Wi-Fi Mobile Storage

Portable wireless storage to offload, edit, and stream anywhere.

High-capacity, wireless mobile storage designed to accompany professional photographers and videographers in the field to easily offload, edit and stream captured photos and high-definition videos.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Adding a Li to a UL after a specified Li contents 2 44
Angular JS Route 3 52
HTML Relative path 9 29
How to loop bootstrap columns which contain database records 9 22
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

920 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

16 Experts available now in Live!

Get 1:1 Help Now