2013-08-23 3 views
2

Что я хочу сделать, это сделать заполнитель в центре 50% верх и 50% левых. Кажется, это хорошо в Chrome, но не в Firefox 23. У меня есть пример here. и мои стили здесь:Укладка стиля на Firefox

textarea::-moz-placeholder { 
    position: relative; 
    font-size: 16px; 
    font-style: italic; 
    color: #ABABAB; 
    top: 50%; 
    text-align: center; 
} 

textarea::-webkit-input-placeholder { 
    position: relative; 
    font-size: 16px; 
    font-style: italic; 
    color: #ABABAB; 
    top: 50%; 
    text-align: center; 
} 

Я был бы признателен, если кто-то может помочь, спасибо!

ответ

1

Я пробовал некоторые странные вещи, но это, кажется, соответствует:
Посмотрите этот jsFiddle

Вы должны поставить атрибут required на вас textarea:

<textarea placeholder="Placeholder" required="required"></textarea> 

Вот CSS:

textarea { 
    height: 300px; 
    width: 300px; 
    /* center the text by default */ 
    text-align:center; 
    resize: none; 
} 

/* align the text left when insert */ 
textarea:focus {text-align: left;} 
/* textarea not empty will have text align left */ 
textarea:not(:invalid) {text-align: left;} 
/* remove the red shadow of firefox if textarea is empty */ 
textarea:invalid {box-shadow: none;} 
/* hide the placeholder on focus */ 
textarea:focus::-moz-placeholder {opacity: 0;} 

textarea::-moz-placeholder { 
    position: relative; 
    font-size: 16px; 
    font-style: italic; 
    color: #ABABAB; 
    /* the main trick to center the placeholder vertically */ 
    line-height:300px; 
} 

textarea::-webkit-input-placeholder { 
    position: relative; 
    font-size: 16px; 
    font-style: italic; 
    color: #ABABAB;  
    line-height: 300px; 
    /* keep the placeholder centered under chrome */ 
    text-align: center; 
} 
+0

'textarea: not (: invalid) {text-align: left;}' - это блестящая идея! Я решаю проблему, которую он решает. Одна из проблем заключается в том, что он не будет работать в старых браузерах, которые не понимают ': not (: invalid)' –

+0

@FAngel Да, я так думаю. Но действительно ли старые браузеры обрабатывают атрибут «placeholder»? – Brewal

+1

Конечно, нет, но они обрабатывают 'textarea {text-align: center;}', и это проблема. –

0

Используйте обивка в вашем CSS вместо того, позиции:

textarea::-moz-placeholder { 
position: relative; 
font-size: 16px; 
font-style: italic; 
color: #ABABAB; 
padding-top: 50px; 
padding-left:50px; 
text-align: center; 
} 

textarea::-webkit-input-placeholder { 
position: relative; 
font-size: 16px; 
font-style: italic; 
color: #ABABAB; 
padding-top: 50px; 
padding-left:50px; 
text-align: center; 
} 

вы можете настроить отступы в соответствии с необходимостью.

+0

Это действительно не работает под FF: http://jsfiddle.net/FDwTE/6/ – Brewal