Hide triangle of dropdownlist when using css with media print

Question

I'm using @media print in my external css file to hide menus etc. However while printing the little triangle of a dropdownlist still shows. Is there a css setting available to hide it as well and only print the selected item?

Answer 1

Unfortunately, no.

Answer 2

No, there isn't. Besides, every browser displays its dropdowns in its own way, some use system widgets, some have their own. In Safari, for example, no matter what styling you remove, it still has a box (well, sort of) around the whole of it. If you don't want to change your HTML code, perhaps a bit of javascript might do it - get the selected value and exchange the dropdown for a paragraph.

Answer 3

I would tentatively say you cannot, because it is a monolithic component: you cannot change it in the same way you cannot change the look of scrollbars, for example.

I didn't chose my example at random: of course, in some browsers (IE at least), you can change the latter. But using some browser-specific CSS, which isn't very practical, unless you are targeting captive intranet application...

Too bad, it is indeed a good idea to hide this part.

[Update] There might be a way, although semantically-wise it is a bit ugly... Whatever.

<select name="Snakes" style="width: 200px;">
  <option value="A">Anaconda</option>
  <option value="B">Boa</option>
  <option value="C">Cobra</option>
  <option selected="" value="P">Python</option>
  <option value="V">Viper</option>
</select>
<!-- Put this style in a class, of course -->
<div style="background-color: white; 
    min-width: 20px; max-width: 20px; position: relative; 
    right: -180px; top: -19px;">&Nbsp;</div>

Of course, the div must be hidden in screen media and get the above style in print media.
Works decently in FF3, Opera 9.5 and even IE7 (not IE6) on WinXP. Alas, I fear the above hack is system dependent and might be broken in other browsers.

PS.: I wrote Nbsp because syntax highlighting hides it otherwise... :-P

Answer 4

As most people have said, the rendering style of form widgets is left pretty much up to the browser. You can style them a bit, but fundamental changes to them are unreliable at best.

As another commenter mentioned, you'd be best using a bit of javascript to achieve this effect. I've given a bit of jQuery that will do this. It's not ideal though - it relies on the user clicking the "Print this page" links, and not using the browser's own Print functions.

For the following markup:

 <p><a class="print" href="#">print this</a></p>
 <form action="/my/action/" method="POST">
  <select id="mySelect">
   <option value="1">An Option</option>
   <option value="2" selected="selected">Another Option</option>
  </select>
 </form>

This jQuery will append a paragraph containing the content of the currently selected item from the drop-down, and hide the form element before printing the page.

    $(document).ready(function() {
  $('a.print').click(function() {
   var selected = $('#mySelect option:selected').text();
   $('#mySelect').after('<p class="replacement">' + selected + '</p>');
   $('#mySelect').hide();
   window.print();
  });
 });

Answer 5

This worked for me in IE6. I didn't try other browsers

http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx