Forums

ymagashe

Hello everyone, This is my first post on the forum. Sorry for this being a question rather than answer.

I am trying to style select box for print style sheet. I want to show the selected option only, not all of the list values.I have just set border as none in following code. This gives me select box but the pull down arrows are visible. If anyone can help me out with the right approach for this, I will be grateful.

Thank you very much.

Sincerely,
Yogesh


select{
	border:none;
}

cybershot

what do you get if you do

select { display: none; }

or

visibility: hidden?

ymagashe

Thanks for the reply. When I apply mentioned rules, I don't see anything. Select box and the value in it, both are hidden.

cybershot

google jquery. It will have options to allow you to show the selected option. Other than that, post your code for the form and maybe I can look into it also.

cybershot

try this code


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Untitled Document</title>
<script src=\"js/jquery-1.3.2.min.js\" type=\"text/javascript\" ></script>
<script type=\"text/javascript\">
$(document).ready(function(){
$('#box1').hide();
$('#box2').hide();
$('#box3').hide();
$(\"#thechoices\").change(function(){
$(\"#\" + this.value).show().siblings().hide();
});

$(\"#thechoices\").change();
});
</script>

</head>
<body>
<select id=\"thechoices\">
<option value=\"box1\">Box 1</option>
<option value=\"box2\">Box 2</option>
<option value=\"box3\">Box 3</option>
</select>

<!-- the DIVs -->
<div id=\"boxes\">
<div id=\"box1\"><p>Box 1 stuff...</p></div>
<div id=\"box2\"><p>Box 2 stuff...</p></div>
<div id=\"box3\"><p>Box 3 stuff...</p></div>
</div>

<body>
</body>
</html>

don't forget to include jquery, otherwise it won't work.

treehouse : what would you like to learn today?

Forums

Selece Box styling for print stylesheet