Я использую @media print в моем внешнем файле css, чтобы скрыть меню и т. Д. Однако при печати маленький треугольник выпадающего списка все еще отображается. Есть ли опция css, чтобы скрыть ее и распечатать только выделенный элемент?Скрыть треугольник выпадающего списка при использовании css со средой печати
ответ
Нет, нет. Кроме того, каждый браузер отображает свои выпадающие списки по-своему, некоторые используют системные виджеты, некоторые из них имеют свои собственные. Например, в Safari, независимо от того, какой стиль вы удаляете, у него все еще есть коробка (ну, вроде) вокруг всего этого. Если вы не хотите менять свой HTML-код, возможно, это может сделать немного javascript - получите выбранное значение и обменивайтесь выпадающим списком для абзаца.
Я бы предположительно сказал, что вы не можете, потому что это монолитный компонент: вы не можете изменить его так же, как вы не можете изменить внешний вид полос прокрутки, например.
Я не выбрал свой пример наугад: конечно, в некоторых браузерах (по крайней мере, 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
Поскольку большинство людей говорили, стиль рендеринга виджетов форм остается в значительной степени до браузера. Вы можете немного стилизовать их, но фундаментальные изменения в них в лучшем случае ненадежны.
Как уже упоминалось выше, вам лучше всего использовать немного 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();
});
});
Это работало для меня в IE6. Я не пробовал другие браузеры
http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx
Это работает в Chrome и Firefox (другие могут работать также)
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
работает в Chrome и firefox. но не в IE 10 – RezaSh 2013-09-26 17:22:55
- 1. CSS треугольник со вставкой тени
- 2. Скрыть кнопки при печати
- 3. скрыть элементы выделенного выпадающего списка
- 4. Показать/скрыть значения выпадающего списка из другого значения выпадающего списка
- 5. Производительность приложения со средой
- 6. Скрыть части страницы при печати?
- 7. CSS: Скрыть дату mm/dd/yyyy placeholder при печати
- 8. Заполнение выпадающего списка со значениями из массива
- 9. CSS Горизонтальное раскрытие выпадающего списка
- 10. Как фильтровать выбор из выпадающего списка при использовании динамических данных?
- 11. Скрыть URLs при печати страницы
- 12. Изменение выпадающего списка автозаполнения css при нажатии стрелки вниз
- 13. Скрыть форму при выборе значения из выпадающего списка
- 14. Добавление функции скрыть в сценарий выпадающего списка jquery при щелчке
- 15. KnockOutJS Show Скрыть элементы при изменении выбора выпадающего списка
- 16. Как скрыть строку таблицы динамически при изменении выпадающего списка?
- 17. Показать/скрыть кнопки на основе выпадающего списка
- 18. скрыть метку выбора от выпадающего списка
- 19. Показать/скрыть строки на выбор выпадающего списка
- 20. Как скрыть выделение выпадающего значения из другого выпадающего списка
- 21. CSS треугольник границы
- 22. Наращивание выпадающего списка со списком файлов и загрузка при нажатии
- 23. Скрыть меню JavaScript при печати
- 24. Скрыть подсказки JQueryUI при печати
- 25. Как скрыть класс при печати
- 26. C# Проблемы со средой WCF
- 27. Проблемы со средой и миграциями
- 28. Изменение цвета выпадающего списка при закрытии
- 29. CSS треугольник не работает
- 30. Неправильный треугольник меню CSS
Я не уверен, что если вы будете уведомлены правок, и я не сделал хотел написать еще один ответ, поэтому на всякий случай скажу вам, что я даю своеобразное решение ... – PhiLho 2008-10-02 09:46:46