Скрыть треугольник раскрывающегося списка при использовании CSS с медиа-печатью - PullRequest
Новая
       25

Скрыть треугольник раскрывающегося списка при использовании CSS с медиа-печатью

2 голосов
/ 02 октября 2008

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

Ответы [ 5 ]

7 голосов
/ 15 мая 2012

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

-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
1 голос
/ 02 октября 2008

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

Я не выбрал свой случайный случай: конечно, в некоторых браузерах (по крайней мере, в 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

1 голос
/ 03 октября 2008

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

Как уже упоминал другой комментатор, вам лучше всего использовать немного 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();
        });
    });
1 голос
/ 02 октября 2008

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

0 голосов
/ 11 ноября 2008

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

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

...