By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,315 Members | 2,150 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,315 IT Pros & Developers. It's quick & easy.

How to change the background and font color of an option tag in safari

P: 58
Hello Frens,

I am supposed to show a fading effect on the options of a multiselect tag.
To achieve this i used something like this:
document.getElementById(toTargetId).style.backgrou ndColor = "#ffff" + FadeSteps[colorId];

where toTargetId -- is the id of that option which should have fading effect
FadeSteps[colorId] is an array having different color codes show that i can show a fading effect by applying different color.

This code gets called repeatedly after a small duration to slow down the fading effect.
This is working fine in IE and mozilla, but its not producing any effect in Safari on MAC machine.
Can anyone please help me.
Thanks in advance
Jan 8 '08 #1
Share this Question
Share on Google+
13 Replies


acoder
Expert Mod 15k+
P: 16,027
This may be an OS-specific issue - it may just not be possible by design. I can set the background color of an option tag in Safari on Windows.
Jan 8 '08 #2

P: 58
This may be an OS-specific issue - it may just not be possible by design. I can set the background color of an option tag in Safari on Windows.
Hi acoder,
You mean to say that it is not possible to change the background color of the option tag in MAC for safari???
Jan 9 '08 #3

acoder
Expert Mod 15k+
P: 16,027
You mean to say that it is not possible to change the background color of the option tag in MAC for safari???
I don't know - I haven't got a Mac to test on. I would've thought that Safari on Windows and Mac would have the same behaviour, but maybe not.
Jan 9 '08 #4

P: 58
I don't know - I haven't got a Mac to test on. I would've thought that Safari on Windows and Mac would have the same behaviour, but maybe not.
hey acoder
Can you please let me know the code which you used to do the above in safari on windows
Jan 9 '08 #5

acoder
Expert Mod 15k+
P: 16,027
Here's a quick test:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function changeBG() {
  5.   var opt = document.getElementById("testopt");
  6.   opt.style.backgroundColor = '#ffffff';
  7. }
  8. </script>
  9. </head>
  10. <body>
  11. <form>
  12. <select multiple style="background-color:red;">
  13. <option id="testopt">aaa
  14. <option>bbb
  15. <option>ccc
  16. </select>
  17. <input type="button" onclick="changeBG();" value="Change BG">
  18. </form>
  19. </body>
  20. </html>
Jan 9 '08 #6

P: 58
Here's a quick test:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function changeBG() {
  5.   var opt = document.getElementById("testopt");
  6.   opt.style.backgroundColor = '#ffffff';
  7. }
  8. </script>
  9. </head>
  10. <body>
  11. <form>
  12. <select multiple style="background-color:red;">
  13. <option id="testopt">aaa
  14. <option>bbb
  15. <option>ccc
  16. </select>
  17. <input type="button" onclick="changeBG();" value="Change BG">
  18. </form>
  19. </body>
  20. </html>
Hey Buddy,
Even i have used the same code but its not working. Is it something that color codes are different for the two browsers
Jan 9 '08 #7

acoder
Expert Mod 15k+
P: 16,027
Hey Buddy,
Even i have used the same code but its not working. Is it something that color codes are different for the two browsers
Not working in just Safari on Mac or on other browsers too?
Jan 10 '08 #8

P: 58
Not working in just Safari on Mac or on other browsers too?

Not working on safari on MAC. I have a similar code as you can see in the first post of this chain
Jan 10 '08 #9

acoder
Expert Mod 15k+
P: 16,027
Getting your form elements to look the same across all browsers and operating systems is difficult if not possible. See this link and the linked article.
Jan 10 '08 #10

P: 58
Getting your form elements to look the same across all browsers and operating systems is difficult if not possible. See this link and the linked article.
Hey Thanks a lot acoder. I eill try to implement as per this article.
Jan 11 '08 #11

acoder
Expert Mod 15k+
P: 16,027
Hey Thanks a lot acoder. I eill try to implement as per this article.
Let me know how it goes. Good luck!
Jan 11 '08 #12

P: 1
Hi all,

any of you got the solution for the problem? Or it is browser specific and we can't apply our custom settings for <option> for safari browser on MAC??
Jan 31 '09 #13

acoder
Expert Mod 15k+
P: 16,027
If browsers don't allow it, there's not much you can do except create your own using DHTML, but is it worth the effort?
Jan 31 '09 #14

Post your reply

Sign in to post your reply or Sign up for a free account.