Скрыть треугольник выпадающего списка при использовании css со средой печати

Question

Я использую @media print в моем внешнем файле css, чтобы скрыть меню и т. Д. Однако при печати маленький треугольник выпадающего списка все еще отображается. Есть ли опция css, чтобы скрыть ее и распечатать только выделенный элемент?

Answer 1

Нет, нет. Кроме того, каждый браузер отображает свои выпадающие списки по-своему, некоторые используют системные виджеты, некоторые из них имеют свои собственные. Например, в Safari, независимо от того, какой стиль вы удаляете, у него все еще есть коробка (ну, вроде) вокруг всего этого. Если вы не хотите менять свой HTML-код, возможно, это может сделать немного javascript - получите выбранное значение и обменивайтесь выпадающим списком для абзаца.

Answer 2

Я бы предположительно сказал, что вы не можете, потому что это монолитный компонент: вы не можете изменить его так же, как вы не можете изменить внешний вид полос прокрутки, например.

Я не выбрал свой пример наугад: конечно, в некоторых браузерах (по крайней мере, IE) вы можете изменить последнее. Но с использованием некоторых CSS-браузеров, которые не очень практичны, если вы не нацеливаете приложение для скрытых интрасети ...

Слишком плохо, это действительно хорошая идея скрыть эту часть.

[Обновить] Возможно, существует способ, хотя семантически-мудрый он немного уродлив ... Как бы то ни было.

<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> 

Конечно, div должен быть скрыт на экранных носителях и получить вышеуказанный стиль в печатных носителях.
Работает прилично в FF3, Opera 9.5 и даже IE7 (не IE6) на WinXP. Увы, я боюсь, что вышеупомянутый хак системный и может быть сломан в других браузерах.

PS .: Я написал NBSP, потому что подсветка синтаксиса скрывает это иначе ... :-P

Answer 3

Поскольку большинство людей говорили, стиль рендеринга виджетов форм остается в значительной степени до браузера. Вы можете немного стилизовать их, но фундаментальные изменения в них в лучшем случае ненадежны.

Как уже упоминалось выше, вам лучше всего использовать немного javascript для достижения этого эффекта. Я дал немного jQuery, который сделает это. Это не идеальный вариант - он полагается на пользователя, который нажимает ссылки «Распечатать эту страницу», а не использует собственные функции печати браузера.

Для следующей разметки:

<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> 

Этого JQuery добавит пункт, содержащее содержимое выбранного элемента из выпадающего списка, и скрыть элемент формы перед печатью страницы.

$(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 4

Это работало для меня в IE6. Я не пробовал другие браузеры

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

Answer 5

Это работает в Chrome и Firefox (другие могут работать также)

-moz-appearance: none; 
-webkit-appearance: none; 
appearance: none;