PHP Dropdown list Dreamweaver graphics

[Gambyt]

Hi all, I am running this pretty intense javascript chess engine and part of it incorporates a php dropdown box.  Dreamweaver has a pretty nice looking dropdown box when I test the page but when it goes to the browser, the browser takes over and makes the dropdown box look typical.

 

I was wondering if someone could tell me how to manipulate the dropdown box to use my graphics instead of the wonderous awesome looking blocks the browser considers a php dropdown box.  Again, dreamweavers appareance of a dropdown menu is pretty slick looking.  I'd like it to stay looking that way when its on the browser. 

 

I've seen many company's in the past have custom php dropdowns like microsoft, adobe.. etc.  I'm sure it is possible just dont know how and cant seem to find a tutorial online.

[RopeADope]

You should be able to modify the style via CSS.  Just edit the select and li tags in the .css file.

[Gambyt]

I attached a picture of what I want the box to look like as it appears in Dreamweaver.  heh, not that great with php just yet but I am pretty uber with CSS.So you are saying I can modify all of it to make it look like this?

 

[attachment deleted by admin]

[Gambyt]

Ok, so if I wanted to make custom form buttons using only CSS is this possible?  Getting closer, I found some example online called nice forms but he uses javascript to tie the buttons together which is not really an option.  I can only use CSS to make the button.

[RopeADope]

Yes, you should be able to alter it with CSS.  There are several properties you could assign to the select and option tags to mimic the dropdown in the pic you posted.  It may not be exactly the same, but you can get it pretty close.  You'll wind up with a master.css(<-arbitrary name) file with some code in it that looks something like this...

select{
   background-color:gray;
   font:10px arial;
   etc....
}
option{
   background-color:gray;
   font:10px arial;
   etc....
}

 

I'm not 100% sure off hand but you may even be able to leave the select tag alone and only do it with the option tags since they show by default.  The select tag is more just a container so you don't have option tags all over the place.

 

Here's some links that should at least get you started:

http://www.outfront.net/tutorials_02/adv_tech/funkyforms5.htm

http://v2.easy-designs.net/articles/replaceSelect/

[Gambyt]

Great stuff, getting closer.  I can round corners and change the shape of the box and everything, but what is the element that controls how the button looks? like if you wanted to change that button into a custom graphic like the one above.  Say instead of using classes just to insert the rule so that ALL php elements of this type will look like this.

[RopeADope]

Great stuff, getting closer.  I can round corners and change the shape of the box and everything, but what is the element that controls how the button looks? like if you wanted to change that button into a custom graphic like the one above.  Say instead of using classes just to insert the rule so that ALL php elements of this type will look like this.

 

1) Define "looks".

2) If you put the <link> tag with all of it's proper attributes(i.e. <link rel="stylesheet" type="text/css" href="master.css" media="screen" />), you can copy and paste(or use php includes) to include the .css file on every page...in which case it'd apply your custom style to every page.

[Gambyt]

well here's the dilemma.. the php form is being dynamically generated by the Javascript below:

 

^{var _94=YAHOO.util.Dom.get(this.board.boardName+"-problemSelector");}

^{var _95=document.createElement("div");}

^{var _96="<form id=\""+this.board.boardName+"-problemSelectorForm\" action=\"\" method=\"\">";}

^{var _97="<select id=\""+this.board.boardName+"-problemSelector\" name=\""+this.board.boardName+"-problemSelector\" style=\"width: "+this.board.pieceSize*8+"px;\">";}

^{var _98="";}

 

So unless I carefully modify this code that generates the dropdown box, I can perhaps just go ahead and do it but since my javascript is a bit shakey I was hoping for a way that the generated PHP script would have to adhere to a common CSS rule once its generated.  This is a difficult question because its not just PHP but also CSS, and Javascript, and DHTML it's such a mishmash of things going on here.  But if I can find a standard element within the PHP script I can bypass having to edit this Javascript all together by some simple CSS rules.