469,277 Members | 2,206 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,277 developers. It's quick & easy.

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

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
13 7425
acoder
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
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.

Similar topics

4 posts views Thread by ACaunter | last post: by
3 posts views Thread by Wes McCaslin | last post: by
7 posts views Thread by =?Utf-8?B?UmVraGE=?= | last post: by
2 posts views Thread by =?Utf-8?B?bG91aXNlIHJhaXNiZWNr?= | last post: by
oll3i
3 posts views Thread by oll3i | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.