Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

change style of select menu. 1

Status
Not open for further replies.
ThomasJSmart

ThomasJSmart

Programmer
Sep 16, 2002
634
i have noticed that using windows xp themes one can change the look of the variouse html elements like the select menu and the radio, check and normal buttons.

is it possible to change the look of these thru css/style/html/javascript? something similer to the way it is possible to change the colors of the scrollbar.

and if it is possible does it work on NN aswell?

thanks, I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Sort by date Sort by votes
select.mycolor {color: blue;}

<SELECT class=&quot;mycolor&quot;..... [Hammer]
Nike Failed Slogans -- &quot;Just Don't Do It!&quot;
 
Upvote 0 Downvote
cool thats a color change :) it works, thanks,

is an image cange possible aswell ?
the arrowbutton part of the select menu, is it posible to change that into my own graphic?

thanks, I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
image change?

you cannot change the arrow for all i know, but it prolly is possible. [Hammer]
Nike Failed Slogans -- &quot;Just Don't Do It!&quot;
 
Upvote 0 Downvote
with a css background image i can add a backround image to buttons, selects etc but i still havnt found out how to change the actuall arrow of a select, or the graphic of a radio/check button I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Did k9logic ever work out how to do this? I want to know too! I want XP style buttons on my intranet pages irrespective of OS. Don't want to use images if I can help it.

Cheers
 
Upvote 0 Downvote
AFAIK they are OS-level GUI widgets. So they really do depend on your OS for how they look. :) don't think you can change them easily at the moment.

Posting code? Wrap it with code tags: [ignore]
Code: 
[/ignore][code]CodeHere
[ignore][/code][/ignore].
 
Upvote 0 Downvote
Yep, can't change the ones that the browser gives you... However you can fudge your own out of CSS and JavaScript:
Code: 
<html>
<head>
<style type=&quot;text/css&quot;>
 .CustomSelectControl{
  width:200px;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: smaller;
 }
 .TopLine{
  padding: 0px;
  margin: 0px;
  background-color: #ddddff;
 }
 .SelectedOption{
  padding: 0px;
  margin: 0px;
  border-left: 2px solid #9999ff;
  border-top: 2px solid #9999ff;
  border-right: 0px none #ffffff;
  border-bottom: 2px solid #ffffff;
  vertical-align: middle;
  width: 184px;
 }
 .downArrow{
  padding: 0px;
  margin: 0px;
  width:16px;
  border-left: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #9999ff;
  border-bottom: 2px solid #9999ff;
  text-align: center;
  vertical-align: middle;
  background-color: #ccccff;
  color: #9999ff;
 }
 .OptionList{
  height:100px;
  background-color: #eeeeff;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-3dlight-color:#ffffff;
  scrollbar-arrow-color:#9999ff;
  scrollbar-base-color:#ccccFF;
  scrollbar-darkshadow-color:#9999ff;
  scrollbar-face-color:#ccccFF;
  scrollbar-highlight-color:#ffffff;
  scrollbar-track-color:#aaaaFF;
  scrollbar-shadow-color:#9999ff;
  border-left: 1px solid #999999;
  border-right: 1px solid #999999;
  border-bottom: 2px solid #ffffff;
 }
 .SelectOption{
  background-color: #eeeeff;
  color: #000000;
  border-bottom: 1px solid #999999;
 }
 .SelectOption_Hilite{
  background-color: #333366;
  color: #eeeeff;
  border-bottom: 1px solid #999999;
 }
</style>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
function showOptions(objClickedOn){
 event.cancelBubble = true;
 var parentObj = objClickedOn.parentElement;
 var childlist = parentObj.children;
 var optionlist = childlist.item(1);
 optionlist.style.display=&quot;block&quot;;
}
function selectNewOption(objClickedOn){
 event.cancelBubble = true;
 var parentObj = objClickedOn.parentElement;
 var grandParentObj = parentObj.parentElement;
 var childlist = grandParentObj.children;
 var topline = childlist.item(0);
 var selecteditem = topline.children.item(0).children.item(0);
 selecteditem.innerText = event.srcElement.innerText;
 hideOptions();
}
function hideOptions(){
 var alldivs = document.getElementsByTagName('div');
 for(var i = 0; i < alldivs.length; i++){
  var currDiv = alldivs.item(i);
  if(currDiv.className == &quot;OptionList&quot;){
   currDiv.style.display=&quot;none&quot;;
  }
 }
}
function hiliteOption(objThis){
 event.cancelBubble= true;
 if(event.srcElement.className != &quot;OptionList&quot;){
  var childs = objThis.children;
  for(var i = 0; i < childs.length; i++){
   var child = childs.item(i);
   child.className = &quot;SelectOption&quot;;
  }
  event.srcElement.className = &quot;SelectOption_Hilite&quot;;
 }
}
</script>
</head>
<body onclick=&quot;hideOptions()&quot;>
<div class=&quot;CustomSelectControl&quot;>
 <div class=&quot;TopLine&quot; onclick=&quot;showOptions(this)&quot;><span class=&quot;SelectedOption&quot;>Selected Option</span><span class=&quot;downArrow&quot;>&#9660;</span></div>
 <div class=&quot;OptionList&quot; onclick=&quot;selectNewOption(this)&quot; onmouseover=&quot;hiliteOption(this)&quot; style=&quot;display:none;&quot;>
  <div class=&quot;SelectOption&quot;>Selected Option</div>
  <div class=&quot;SelectOption&quot;>Some Option</div>
  <div class=&quot;SelectOption&quot;>Some Other Option</div>
  <div class=&quot;SelectOption&quot;>Another Option</div>
  <div class=&quot;SelectOption&quot;>Yet Another Option</div>
  <div class=&quot;SelectOption&quot;>Yet Another Option 2</div>
  <div class=&quot;SelectOption&quot;>Yet Another Option 3</div>
  <div class=&quot;SelectOption&quot;>Yet Another Option 4</div>
  <div class=&quot;SelectOption&quot;>Yet Another Option 5</div>
 </div>
</div>
</body>
</html>

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
 
Upvote 0 Downvote
wow :) im impressed :D thanks for the script!

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
402
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
344
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
272
PeDa
PeDa
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
71
CoolBreeze007
CoolBreeze007
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
136
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top