|
|
|
| |||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
#1
|
|||
|
|||
|
CSS > forms
hi, i am workin in IE,
i have used a CSS sheet, to take away the borders on text feilds, but dont seem to be able to do it on drop-down-menus anyone help ?? PHP Code:
thats the same for "input" and "textarea" both of which dont display with borders. |
|
#2
|
||||
|
||||
|
Well, I dont think that you can have a borderless one. I fooled around for a while but to no avail did I get a borderless drop down menu.
Sorry dude, maybe somebody else can help you.
__________________
Quick, think of something geeky to say before they catch on! Mozilla is your friend! Web Site |
|
#3
|
||||
|
||||
|
I don't think there is a way, but as ever there's a semi-cheat. Where the drop down box would be create a <div> with a text-box in it and a down arrow. Play around with CSS until it looks like an unclicked drop down box. Then create another <div> beneath it with overflow:scroll; as a CSS style. The lower <div> should be where the drop down part would be and look as a drop down would look. Then all you have to do, is to use a bit of event handling to make it act like a drop down box.
Easy huh? But once you get it right then it's just copy and paste from there on in! |
|
#4
|
|||
|
|||
|
i have no idea what you mean
oh well, at least i know it isnt just me. do we have an CSS / HTML pros that could help ? |
|
#5
|
||||
|
||||
|
Okay then, let me spell it out:
<html> <head> <script type="text/javascript"> function selectMe(value) { optionSelected = value document.getElementById("lowerPart").style.visibility = "hidden" document.getElementById("topPart").innerText = value alert ("You selected " + value + " from the drop down box") } </script> </head> <body> <div id="topPart" style="position:relative; height:20; width:100; border-style:inset;border-width:thin;" onClick="document.getElementById('lowerPart').style.visibility = 'visible'"> -- Select -- </div> <div id="lowerPart" style="position:relative; border-style:none; overflow:scroll; height:80; width:100; visibility:hidden"> <a href="javascript: selectMe('option1')" style="color:#000000; text-decoration:none;">Option 1</a> <a href="javascript: selectMe('option2')" style="color:#000000; text-decoration:none">Option 2</a><br> <a href="javascript: selectMe('option3')" style="color:#000000; text-decoration:none">Option 3</a><br> <a href="javascript: selectMe('option4')" style="color:#000000; text-decoration:none">Option 4</a><br> </div> </body> </html> Try running the above. What it does is use two <div>s that combine to look like a drop down box. Click on the box and the options appear, then select an option and it fills the box in. Try it! Best thing is you can apply any CSS you wish! |
![]() |
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS > forms |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|