2013-07-16 4 views
-1

Это сводит меня с ума. У меня есть форма, где я задал цвет текста фиолетовым, но по какой-либо причине выбранный текст «сильнее», чем текст ввода. Не могу понять, почему!Цвет текста для выбора и ввода

http://jsfiddle.net/ZtyHS/

Любые предложения?

Мой CSS:

.formBox, .normSelect { 
    color: purple; 
    font-size: 15px; 
    padding: 6px 8px 5px; 
    outline-color: transparent; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
} 
+0

И более сильным, вы имеете в виду darker :) –

+0

Что «сильнее» об этом? – j08691

+0

Как ни странно, когда вы вводите значение на входе, оно становится тем же фиолетовым. Вероятно, делать с значениями-заполнителями. –

ответ

2

Что вы видите это placeholder, что текст отображается, когда не вводится никакого значения. http://css-tricks.com/snippets/css/style-placeholder-text/ и Change an HTML5 input's placeholder color with CSS объясняет, как стилизовать placeholder:

::-webkit-input-placeholder { /* WebKit browsers */ 
    color: #999; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #999; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #999; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    color: #999; 
} 
+0

+1 та же линия мышления –

+0

О, интересно! Я думал, что это будет так, но если бы я сделал это правильно, я все еще вижу различную «насыщенность» выбранных значений. http://jsfiddle.net/ZtyHS/3/ – user2574250

+0

Я не предлагаю использовать префиксы браузера. Прогрессивное улучшение - путь. http://caniuse.com/input-placeholder – shubniggurath

0

Если ввести в поле, вы замечаете, что ваш вход имеет тот же цвет, как выберите текстовое поле. Какая разница? Это текст заполнителя. См. Этот ответ для гораздо лучшего объяснения, чем я могу дать при оформлении заполнителя: https://stackoverflow.com/a/2610741/495935

0

Если вы говорили о тексте «Выбрать», добавив, что это сработает!

font-weight:100; 
font-size: 12px; 

sroes упомянул для заполнителя!

0

Это то, что светлячок будет делать с «заполнитель» текст

input::-moz-placeholder, textarea::-moz-placeholder { 
    display: inline-block !important; 
    opacity: 0.54; /* <-- SEE THIS ? */ 
    overflow: hidden !important; 
    pointer-events: none !important; 
    resize: none !important; 
} 

Каждый «благосклонной» браузер будет стиль по умолчанию.

См http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

enter image description here

sroes Используйте ответ на стиль ввод [placehorder], и вы должны быть в порядке.

Окончательно, чтобы ответить на ваш вопрос «Любые предложения?» : ну да, у меня есть один: давайте играть в шахматы или паршеи.

+0

Зачем им делать вводный текст с непрозрачностью и не выбирать текст? Это просто странно для меня. – user2574250

+0

Мы берем элемент «псевдо», который содержит временный текст внутри ввода [текст] или textarea [текст], а не выбор [текст]. Ведьма не отображает элемент «псевдо», а реальные данные из html. –

Смежные вопросы