By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,053 Members | 1,251 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,053 IT Pros & Developers. It's quick & easy.

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

P: 1
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="selectstyle">
<option selected value="1">apple
<option value="2">orange
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
May 23 '07 #1
Share this Question
Share on Google+
1 Reply


Expert 100+
P: 1,892
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="selectstyle">
<option selected value="1">apple
<option value="2">orange
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Have you tried just using style="border: 0px "?
May 24 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.