Remove scroll bar from <select> tag

HTML & CSS
1

I am using a print style sheet to remove borders and scroll bars from my form. While this style works for textareas, it does not remove the arrow from a select tag.

select {
scroll:none;
border:none;
scrollbar-base-color: #FFF;
scrollbar-face-color: #FFF;
scrollbar-arrow-color: #FFF;
scrollbar-3dlight-color: #FFF;
scrollbar-highlight-color:#FFF;
scrollbar-shadow-color: #FFF;
scrollbar-darkshadow-color: #FFF;
scrollbar-track-color: #FFF;
}

http://mainly-danish.com/ARD3_current.html

Click a radio button to make visible the select tags…

2

I’m not really clear on what the issue is. Are you trying to style this form so that it can be printed? If I try to print it, I don’t see any scroll bars anywhere.

3

Yes this form needs to be printed. Select one of the radio buttons under the sentence… Indicate the number of Curriculum areas to be evaluated…

Select an option, then click print preview.

4

OK, tried that and I don’t get any scroll bars etc. If I choose “4 weeks”, that just prints as clean text.

What browser are you seeing this in?

5

You shouldn’t expect that stuff to work. Especially not on a form element such as <select>

6

I’m using IE. It is not a full scroll bar, but the arrow used to select the options

7

Is this IE9 or just older versions?

8

I believe older IE got rid of this, didn’t they?

Perhaps Javascript could help you with this? I don’t know the limitations of it, and I doubt the scope of JS could go so far as to manipulate the browser, but you could look something up :).

9

i also posted this in the Javascript section.
The solution is to use javascript to populate a <span> with the information in the select tag.
Use classes to display the <select> on screen and display:none @media print.
Use classes to display:none the <span> and display @media print.

I’ve used javascript on this form to do just that with the “right header”. The "student name, student ID, date, and page___ of ___ " print but are not displayed on screen.