HTML CSS - how to have a transparent border around a list

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • constantlearner
    New Member
    • May 2007
    • 1

    HTML CSS - how to have a transparent border around a list

    I have the following code, which you can paste into an html file and try. In IE, a border appears around the selection box. How do I make the border around the selection box transparent, or have no border?

    When I try in Firefox, I don't see a border but I see a scrollbar on the right. How do I get rid off that?

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {margin: 0; padding: 0; background-color: black;}
    .content {width: 800px; text-align: center; border: 1px solid black;}
    .selectstyle {width: 100px; font-family: comic sans MS, helvetica; font-size: 12pt; border-style: none; border-color: black; border-width: 0px 0px 0px 0px; color: red; background-color: black; margin: 0px}
    </style>
    <body>
    <form>
    <table align="center">
    <tr>
    <td>
    <select name="fruitkey" width="100" size="6" class="selectst yle">
    <option selected value="1">apple
    <option value="2">orang e
    </select>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>
  • AricC
    Recognized Expert Top Contributor
    • Oct 2006
    • 1885

    #2
    Originally posted by constantlearner
    I have the following code, which you can paste into an html file and try. In IE, a border appears around the selection box. How do I make the border around the selection box transparent, or have no border?

    When I try in Firefox, I don't see a border but I see a scrollbar on the right. How do I get rid off that?

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {margin: 0; padding: 0; background-color: black;}
    .content {width: 800px; text-align: center; border: 1px solid black;}
    .selectstyle {width: 100px; font-family: comic sans MS, helvetica; font-size: 12pt; border-style: none; border-color: black; border-width: 0px 0px 0px 0px; color: red; background-color: black; margin: 0px}
    </style>
    <body>
    <form>
    <table align="center">
    <tr>
    <td>
    <select name="fruitkey" width="100" size="6" class="selectst yle">
    <option selected value="1">apple
    <option value="2">orang e
    </select>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    Have you tried just using style="border: 0px "?

    Comment

    Working...