CSS > forms

Dev Shed Forums Sponsor:

November 1st, 2001, 03:19 PM

jonny

Newbie forever

Join Date: May 2001

Location: UK

Posts: 20

Time spent in forums: < 1 sec
Reputation Power: 0

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:


		
			
 select { 

font-family: verdana, arial, sans-serif; font-size: 9px; text-decoration: none;

; color: #FF6600; background-color: #333333

; border: 1px #666666 solid

}

thats the same for "input" and "textarea" both of which dont display with borders.

November 1st, 2001, 07:38 PM

Zoko Siman

Web Monkey

Join Date: May 2001

Location: I refuse to be from anywhere, I am one with the internet

Posts: 76

Time spent in forums: < 1 sec
Reputation Power: 13

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

November 2nd, 2001, 03:35 AM

binky

Contributing User

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Oct 2001

Location: New Zealand

Posts: 1,774

Time spent in forums: 1 Day 58 m 15 sec
Reputation Power: 23

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!

November 2nd, 2001, 12:47 PM

jonny

Newbie forever

Join Date: May 2001

Location: UK

Posts: 20

Time spent in forums: < 1 sec
Reputation Power: 0

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 ?

November 5th, 2001, 05:36 AM

binky

Contributing User

Join Date: Oct 2001

Location: New Zealand

Posts: 1,774

Time spent in forums: 1 Day 58 m 15 sec
Reputation Power: 23

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!

Developer Shed Advertisers and Affiliates