Входной Заполнитель без заполнения

Question

Сгенерированный SASS, я пытаюсь написать ввод с центральным заполнителем, но с текстом ввода с выравниванием по левому краю (с некоторым дополнением). Я все еще немного новичок в CSS, поэтому, пожалуйста, обратите внимание на любое незнание.

Установка отступы левой во входном CSS, я произвожу 2 проблемы:

1. Когда я text-align:center замещающий текст, я до сих пор, что отступы толкающее выравнивание вправо немного.
2. Когда я устанавливаю 50% ширину на входе, он не учитывает отступы, поэтому я получаю несколько пикселей + 50% от родительского контейнера.

Ниже мой SASS код:

input::-webkit-input-placeholder { 
color:white; 
text-align:center; 
} 
input[type=text],input[type=password],input[type=tel],input[type=email] { 
height:$formiconheight; 
width:$formItemMaxWidth; 
margin:5px; 
border-radius:5px; 
padding-left:$formiconwidth + $formInputPadding; 
} 

Answer 1

Для выпуска с padding-left, вы только добавляя отступы слева, так само собой разумеется, что текст не будет центрирован. Либо не добавьте отступы, либо добавьте равную сумму в padding-left и padding-right.

Ширина в CSS, если только для содержимого. Не содержание, заполнение и граница. Если вы хотите включить дополнение, вы должны включить box-sizing: border-box (и -moz-box-sizing: border-box для Firefox). Это говорит браузеру, чтобы ширина включала прописку.

Кроме того, вы используете только префикс для WebKit для заполнителя. Firefox и IE также позволяет стилизовать заполнитель, так что вы должны включить другой набор правил для обоих:

input:-ms-input-placeholder { } 

и:

input::-moz-placeholder { } 

Если вы хотите поддержать Firefox < 19, вы должны также включать в себя :

input:-moz-placeholder { }