2013-08-09 1 views
6

Итак, у меня есть пользовательский стиль для элемента ввода, и я хочу поместить некоторый текст на вход с использованием :after ,Невозможно установить плотность шрифта на: после псевдоэлемента, используемого в <input> элементах

Проблема я бегу в том, что я не могу изменить начертание шрифта на :after элемента, эта проблема возникает только при сочетании input и :after элементов.

CSS

input[type="checkbox"] { /* enable styling of the checkbox ! */ 
    -moz-appearance: none; 
    -webkit-appearance: none; 
} 

input { /* set up some basic styles.... */ 
    background-color:#ccc; 
    width:200px; 
    height:200px; 
    background-color:grey; 
} 

input:after { /* and we create the :after element */ 
    width:100%; 
    text-align:center; 
    font-weight:100; /* THIS DOESN'T WORK FOR SOME REASON */ 
    content: "This should be thin"; /* some text */ 
} 

JSFIDDLE

http://jsfiddle.net/xQVfL/1/

ПРОВЕРЕНО НА

Chrome для Mac (последний)

ВОПРОС

Почему я не могу установить начертание шрифта на :after элемент, установленный на input элемент?

+0

Кажется, для меня работает .. 700 делает его полужирным .. и 100 делает его тонким – krilovich

+1

Я использую хром (mac), и он не работает – koningdavid

+0

100 в основном означает нормальный вес .. делает 700 смелым для тебя? посмотрите здесь http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-weight&preval=900 – krilovich

ответ

2

Этому ответили здесь. Похоже: после этого было предназначено только для добавления к тегам контейнера. Can I use the :after pseudo-element on an input field?

+0

Ну ... это отстой. Подождите немного дольше, может быть, кто-то придумает обходной путь, иначе вы не согласитесь с ответом. – koningdavid