Thread: CSS > forms

    #1
  1. No Profile Picture
    Newbie forever
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    UK
    Posts
    20
    Rep 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-familyverdanaarialsans-seriffont-size9pxtext-decorationnone;
    color#FF6600; background-color: #333333
    border1px #666666 solid

    thats the same for "input" and "textarea" both of which dont display with borders.
  2. #2
  3. Web Monkey
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    I refuse to be from anywhere, I am one with the internet
    Posts
    76
    Rep Power
    14
    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
  4. #3
  5. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    24
    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!
  6. #4
  7. No Profile Picture
    Newbie forever
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    UK
    Posts
    20
    Rep Power
    0

    Unhappy


    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 ?
  8. #5
  9. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    24
    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!

IMN logo majestic logo threadwatch logo seochat tools logo