Стилизация атрибута Value

[Svatov]

С популяризацией использования CSS3 кнопок возник вопрос. Насколько гибко стилизуется данный атрибут, как в логике работы различных браузеров он выравнивается, описано ли это в спецификации и что к нему можно применить. Информация которую собрал достаточно туманна.

[zSpx]

Может элемент? Как можно стилизовать атрибут value? oO Кнопки, что вы указали, современными браузерами стилизуются целиком и полностью. Да и старыми тоже, в рамках своих возможностей(в старых ИЕ есть баги с отступами). Или что вы имеете в виду?

[Svatov]

Тут скорее имелось ввиду конечно же элемент с атрибутом value в контексте input type="button | reset | submit, который задает текст данных инпутов, вопрос состоит в том как выравнивается этот текст внутри элемента.

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

Edited December 21, 2011 by Svatov

[dostel1]

padding

[zSpx]

height:N;text-align:center;vertical-align:middle;

http://jsfiddle.net/PEEP7/

Edited December 21, 2011 by zSpx

[Svatov]

Это хорошо,только вот мне не понятно, что этот текст представляет из себя технически и как обусловлена его стилизация..или просто производители браузеров так между собой договорились?

Edited December 21, 2011 by Svatov

[zSpx]

Не понял вопрос. Текст стилизуется также, как текст в контентосодержащих элементах.

[Svatov]

Если коротко, то где это поведение задокументировано.

Вот, например, http://jsfiddle.net/9AdT4/1 , если смотреть в мозиле скомпелированный стиль, то там line-height почему-то железное и не перекрывается, когда в Chrome есть на него реакция. Так же в мозиле непонятное поле сверху и слева, которое берется непонятно откуда для меня...в скомпилированном стиле не вижу. Например в Хроме там же задается падинг по умолчанию, который хотя бы перекрыть можно.

Edited December 21, 2011 by Svatov

[zSpx]

Что, где не перекрывается? Что значит не перекрывается? И вообще я вам глупостей написал. С paddingom в ИЕ 7 вроде бы все нормально, там, если не ошибаюсь, проблема с width:auto, т.е. у кнопки всегда какие-то левые отступы справа и слева от текста получаются при дефолтном display.

[Svatov]

Заметил еще одну новость для себя, border учитывается в заданную inputу ширину (см. пример выше), хотя по моим ожиданиям должен был работать по схеме width+padding+border+margin. Текст (значение value) внутри inputa выравнивается в разных браузерах по-разному, и в некоторых случаях даже невозможно отследить.

Под перекрытием имелось в виду перекрытие свойств user agenta (браузера), а некоторых случаях, например в мозиле перекрыть line-height невозможно, его значение можно глянуть в компилированном стиле, потом поля непонятные у него ...о которых намека даже нет в том же стиле по умолчанию браузера.

[troll]

В Firefox нельзя перекрыть line-height, потому что там в стилях по умолчанию для input задано line-height: normal !important. В Bugzilla даже есть несколько багов про это. А border включается в ширину опять же из-за дефолтного -moz-box-sizing: border-box.

Edited December 22, 2011 by troll

[zSpx]

Эрик Мэйер:

If a replaced element appears in the line, its content-area is equivalent to its intrinsic height and width, plus any padding, border, or margins. line-height has no effect on the inline box of replaced elements (but is used when interpreting percentage values for the vertical-align property)

.

Т.е. высота строки не влияет на размер замещаемых инлайновых элементов. ФФ делает более правильно имхо, игнорируя его. Другие браузеры зачем-то сдвигают текст, который обрезается размерами самого элемента.

[SelenIT]

В целом да, замещаемые элементы — вещь в себе. У браузеров бывают маленькие хитрости, помогающие их укротить (напр., псевдоэл-т ::-moz-focus-inner в мозилловых), но возня с ними еще та. Теоретически, с button-ами должно быть проще, на практике проблемы с ними почти те же...

[Svatov]

Более менее разобрался, всем спасибо, честно говоря упустил момент про replaced elements, все еще верю в утопические идеалы и последовательность) как же все не просто...со слезами вспоминаю как наседал над разработчиками одного сайта, чтобы до ума в ие6 довели , терь все стало на свои места, а я думал ленивые) так я вообще садюгой выходит был