Text color for select and input

Question

This is driving me nuts. I have a form where I have set the text color to be purple, but for some reason the select text is "stronger" than the input text. Can't figure out why!

http://jsfiddle.net/ZtyHS/

Any suggestions?

My CSS:

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

Oddly, as you type a value in the input, it becomes the same purple value. Probably to do with placeholder values. — Patrick Moore, Jul 16 '13 at 19:30
A suggestion : go back to school and don't leave your day-job. It's the 'placeholder' browser default styling. — Milche Patern, Jul 16 '13 at 19:38

score 2 · Accepted Answer · edited May 23 '17 at 11:56

2

What you're seeing is the placeholder, which is the text shown when no value is entered. http://css-tricks.com/snippets/css/style-placeholder-text/ and Change an HTML5 input's placeholder color with CSS explains how to style the 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;
}

edited May 23 '17 at 11:56

Community

1
1

answered Jul 16 '13 at 19:30

sroes

14,663
1
53
72

Oh interesting! I thought that was going to be it, but if I did it correctly I'm still seeing a different "saturation" on the select values. http://jsfiddle.net/ZtyHS/3/ – user2574250 Jul 16 '13 at 19:36
I do not suggest using browser prefixes. Progressive enhancement is the way to go. http://caniuse.com/input-placeholder – shubniggurath Jul 16 '13 at 19:38
Is it better to just go back to using "value" instead of "placeholder" then? These values have to show up in all browsers, otherwise the user won't know what to put in what box. – user2574250 Jul 16 '13 at 19:40
No, placeholder is fine. If you need to support all browsers you can use plugins like https://github.com/mathiasbynens/jquery-placeholder – sroes Jul 16 '13 at 19:46

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

If you type in the field, you'll notice your input is the same color as the select box text. What's the difference? It's placeholder text. See this answer for a much better explanation than I can give on placeholder styling: https://stackoverflow.com/a/2610741/495935

edited May 23 '17 at 11:56

Community

1
1

answered Jul 16 '13 at 19:31

Surreal Dreams

26,055
3
46
61

score 0 · Answer 3 · answered Jul 16 '13 at 19:36

0

If you were talking about "Select" text then adding this will work !

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

sroes has mentioned for placeholder !

answered Jul 16 '13 at 19:36

user2216267

491
3
8
21

score 0 · Answer 4 · edited May 23 '17 at 12:05

0

This is what firefox will do to a 'placeholder' text

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;
}

Each and every 'supportive' browser will style by default.

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

enter image description here

Use sroes answer to style your input[placehorder] and you should be ok.

Finaly, to answer your question 'Any suggestions?' : well, yes i have one : let's play chess or parcheesi.

edited May 23 '17 at 12:05

Community

1
1

answered Jul 16 '13 at 19:47

Milche Patern

19,632
6
35
52

Why would they make input text have opacity and not select text? That's just weird to me. – user2574250 Jul 16 '13 at 19:55
We are taking about the 'pseudo' element inserted has a temporary text inside an input[text] or textarea[text] and not a select[text] witch is not displaying a 'pseudo' element but real data from within the html. – Milche Patern Jul 16 '13 at 20:03

Text color for select and input

4 Answers4