CSS reset

А как вы его делаете (и делаете ли)? Я вот так:

/* //meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, 
form, label, legend, caption {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

© meyerweb.com/eric/tools/css/reset/ (с небольшими изменениями)

И собственно вопрос: как восстановить исходный вид input после задания ему border?

17 комментариев

ololo
29 октября 2009, 01:12
0

Что понимается под исходным видом? Отступы?

Странно, что Мейер в своём ресете потерял такой элемент, как <button>

bananan
29 октября 2009, 01:34
0

bananan
29 октября 2009, 01:34
0

сам вид кнопочки «объёмный»

ololo
29 октября 2009, 01:59
0

В каждом браузере кнопки выглядят по-разному, в данном случае у тебя они из библиотеки qt.

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

Если надо эмулировать объём, то можно поиграть с бордерами и фоном, в качестве которого можно заюзать и картинку. А что у тебя получается с ресетом в Опере?

ololo
29 октября 2009, 15:19
0

только обратил внимание, что в приведённом коде нет элемента input
по идее, кнопки должны остаться в неприкосновенности

bananan
29 октября 2009, 16:24
0

верно, его там предусмотрительно убрал ТС

ololo
29 октября 2009, 02:04
0

В этом, кстати, один из недостатков ресета. Лично я его не использую.
А ты для каких целей пользуешься? Разве не удобнее будет всё сделать самому?

seligoroff
29 октября 2009, 11:09
-12

восстановить скорее всего через border-style: inset

ololo
29 октября 2009, 14:52
0

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

поведение элемента input с присвоенным ему css-свойством border-style:inset

поведение элемента input с присвоенным ему css-свойством border-style:inset

Заодно этот пример демонстрирует неидеальность ресета в части нерешённого однопиксельного бага в опере.

seligoroff
29 октября 2009, 15:05
-12

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

bananan
29 октября 2009, 12:26
0

единственное что получилось высосать это кнопка аля FF v1

input {
	border: none;
}

     input.form_submit {background:ButtonFace; color:ButtonText; border:2px outset ButtonFace;}
     input.form_submit:active {border-style:inset; -webkit-appearance:push-button;}

ololo
29 октября 2009, 14:56
0

Если стоит задача восстановить исходный вид только для кнопок, в дпнном случае лично я использовал бы это:

<button>Батон</button>

seligoroff
29 октября 2009, 15:03
-11

Теперь по ресету, а то убегал и времени не было отписаться. Вот уже года полтора как сам не верстаю (те редкие случаи, когда приходится я не считаю), тем не менее свою рекомендацию дать могу — reset.css являющийся частью UI-фреймворка YUI.
Причины:
1. Фреймворк разрабатывается в Yahoo, опыта им не занимать
2. Фреймворк имеет постоянную поддержку и тестирование с их стороны
3. Использование части фреймворка (в данном случае ресета всех свойств) не обязывает использовать его остальные части.