На чём Вы верстаете?

psywalker · April 2, 2011

Именно

Как всё просто :rolleyes:

Great Rash · April 4, 2011

Не нужно им управлять, нужно его любому элементу присваивать.

Если я не ошибаюсь, то вебкиты такое умеют. Там есть параметр -webkit-appearance.

Например можно замутить так (смотреть в Хроме или Сафари):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>

	<style type="text/css">
		* {margin: 0; padding: 0;}
		div {
			width: 100px;
			height: 100px;
			border: red 1px solid;
			-webkit-appearance: menulist;
		}
	</style>
</head>
<body>

	<div>111</div>

</body>
</html>

psywalker · April 4, 2011

Дружище, а что делает этот код, вот скриншот

http://www.screencast.com/users/psywalker/folders/Jing/media/07e3b8d0-889a-4c55-b015-ed72543586db

Кто это за кнопка такой и что она умеет?

Great Rash · April 4, 2011

Этот код превращает <div> в <select>.

psywalker · April 4, 2011

Этот код превращает <div> в <select>.

А как сделать так, чтобы он работал? Я пробывал заполнять этот див, ничего не выходит.

Great Rash · April 4, 2011

Заставить работать его походу не получится, видимо стиль влияет только на внешний вид...

swetlana · April 4, 2011

Если я не ошибаюсь, то вебкиты такое умеют. Там есть параметр -webkit-appearance.
Например можно замутить так (смотреть в Хроме или Сафари):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>

	<style type="text/css">
		* {margin: 0; padding: 0;}
		div {
			width: 100px;
			height: 100px;
			border: red 1px solid;
			-webkit-appearance: menulist;
		}
	</style>
</head>
<body>

	<div>111</div>

</body>
</html>

Ну это не совсем то.

Это всё-таки в рамках более традиционных представлений.

SelenIT · April 4, 2011

стиль влияет только на внешний вид...

Увы. Специфические DOM-свойства (типа checked, selectedIndex и value) стиль навесить бессилен, на ближайшее время это прерогатива парсера разметки...

Great Rash · April 4, 2011

Я думал что -webkit-appearance заставляет парсер обрабатывать определенный элемент иначе. Разве не так?

psywalker · April 4, 2011

Увы. Специфические DOM-свойства (типа checked, selectedIndex и value) стиль навесить бессилен, на ближайшее время это прерогатива парсера разметки...

Тогда выходит пока это только никому не нужные впереди идущие паровозы, да?

Я думал что -webkit-appearance заставляет парсер обрабатывать определенный элемент иначе. Разве не так?

И я было подумал так, но видимо это так будет в будущем, с новыми парсерами, может быть в ФФ5 что нибудь будет.

swetlana · April 4, 2011

-webkit-appearance заведует лишь внешним видом.

К примеру, есть определённый внешний вид у <input type="search">, а вот дизайнеру захотелось его хитро по-своему оформить.

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

А чтобы оформить было можно, задаётся -webkit-appearance: textfield — и всё, можно творить что угодно.

psywalker · April 4, 2011

-webkit-appearance заведует лишь внешним видом.
К примеру, есть определённый внешний вид у <input type="search">, а вот дизайнеру захотелось его хитро по-своему оформить.
Вебкитные браузеры плевать хотели на стили и оформляют его всё равно так, как по их мнению должно выглядеть поле поиска.
А чтобы оформить было можно, задаётся -webkit-appearance: textfield — и всё, можно творить что угодно.

Девчуш, а ты не могла бы забацать наглядный примерчик плиз.

swetlana · April 4, 2011

специально забацать не буду.

Покажу в какой-нибудь из моих недавних работ.

Например, тут.

Поле поиска тут, правда, надо ещё суметь найти, но подскажу: оно справа наверху еле заметное.

Вот к нему и применён стиль -webkit-appearance: textfield.

Попробуй в веб-инспекторе выключить это правило и посмотреть, что будет.

SelenIT · April 4, 2011

Я думал что -webkit-appearance заставляет парсер обрабатывать определенный элемент иначе. Разве не так?

Насколько я понимаю, к тому моменту, когда доходит до интерпретации стилей, парсер разметки уже отработал (как умел) и перегнал разметку в железобетонную DOM-структуру. И стили могут на нее влиять лишь в своей ограниченной песочнице — в пределах document.deafultView в "стандартных" и element.currentStyle/runtimeStyle в "непарнокопытных", соотв-но . Что-то большее дозволено лишь скриптам...

psywalker · April 4, 2011

специально забацать не буду.
Покажу в какой-нибудь из моих недавних работ.
Например, тут.
Поле поиска тут, правда, надо ещё суметь найти, но подскажу: оно справа наверху еле заметное.
Вот к нему и применён стиль -webkit-appearance: textfield.
Попробуй в веб-инспекторе выключить это правило и посмотреть, что будет.

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

swetlana · April 4, 2011

это <input type="search">.

по функционалу он не отличается от <input type="text"> (по крайней мере пока).

Однако вебкитные браузеры такой инпут оформляют по своему, и повлиять на это средствами css не во всём возможно.

В частности, нельзя задать форму, рамку.

Однако это всё легко задаётся простому текстовому полю.

Вот и переопределяется из поля поиска в простое текстовое.

Влияет это переопределение только лишь на особенности внешнего вида.

psywalker · April 4, 2011

это <input type="search">.
по функционалу он не отличается от <input type="text"> (по крайней мере пока).
Однако вебкитные браузеры такой инпут оформляют по своему, и повлиять на это средствами css не во всём возможно.
В частности, нельзя задать форму, рамку.
Однако это всё легко задаётся простому текстовому полю.
Вот и переопределяется из поля поиска в простое текстовое.
Влияет это переопределение только лишь на особенности внешнего вида.

Ага, понял. Т.е. ты я так понял хочешь юзать <input type="search">, но так как этот type ещё нигде почти не поддерживается, и мало того Вебкиты его по своему стилизуют, ты просто его этой магией в чувство приводишь, да?

swetlana · April 4, 2011

поддерживается он как раз везде.

Ну разве что ископаемые IE его понимают как type="text" (что, в принципе, вполне приемлемо).

А особый внешний вид — это на самом деле правильно.

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

В частности, в сафари если нажать Shift+Cmd+F, фокус ввода помещается в <input type="search">.

Это и есть правильное ожидаемое поведение. Это и есть часть поведения, описываемого -webkit-appearance:searchfield.

Внешний вид, повторяющий внешний вид системного поля поиска — тоже из той же оперы.

Другое дело, что уверенному в собственной гениальности дизайнеру эконом-класса этого не объяснить.

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

rash · April 4, 2011

В частности, в сафари если нажать Shift+Cmd+F, фокус ввода помещается в <input type="search">.

Эээ, нет.

Но какая-то общая стандартная комбинация клавиш для этого так и просится сама собой Уже думал о том, чтобы использовать для этого accesskey.

s0rr0w · April 4, 2011

Насколько я понимаю, к тому моменту, когда доходит до интерпретации стилей, парсер разметки уже отработал (как умел) и перегнал разметку в железобетонную DOM-структуру. И стили могут на нее влиять лишь в своей ограниченной песочнице — в пределах document.deafultView в "стандартных" и element.currentStyle/runtimeStyle в "непарнокопытных", соотв-но . Что-то большее дозволено лишь скриптам...

Абсолютно верно.

Sign In

На чём Вы верстаете?

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Serlutin

swetlana

Bayanruby

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information