Apply multiple styles to a single placeholder in an input element

Question

I've got a basic input element on a form:

<input type="text" name="where" placeholder="Location or Place">

But I want to style the placeholder inline with the design below:

Currently I've got the following styles:

::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, input:-moz-placeholder {
    color: white;
}

Obviously this doesn't handle the light blue 'or' text. I'd love to do this with CSS3 where possible. It it possible to style this using just CSS?

Its showing white color i checked please see demo http://jsbin.com/vufucubi/1 — Just code, Apr 11 '14 at 08:55
Interesting but I can't think of any way to do that. http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css — Paulie_D, Apr 11 '14 at 08:56
You can set one color but you have to do ::-webkit-input-placeholder {color: white;}, ::-moz-placeholder {color: white},... I don't think you can add another color to placeholder (span or whatever). — Vladislav Stanic, Apr 11 '14 at 09:01

Getz · Accepted Answer · 2014-04-11T09:38:44.207

The only solution i see is to avoid the use of placeholder and replace its behaviour with javascript. The old-style way!

enter image description here

See this demo

HTML

<div class="location">
    <span class="holder">Location <span class="blue">or</span> Place</span>
  <input id="input" size="18" type="text" />&nbsp;
</div>

Javascript

$(function() {
    $("span.holder + input").keyup(function() {
        if($(this).val().length) {
            $(this).prev('span.holder').hide();
        } else {
            $(this).prev('span.holder').show();
        }
    });
    $("span.holder").click(function() {
        $(this).next().focus();
    });
});

CSS

div.location > span.holder {
position: absolute;
margin: 5px 8px;
color: #ddd;
cursor: auto;
font-family: Helvetica;
font-size: 11pt;
z-index: 1;
}

div.location > span.holder > span.blue{
    color: #819FF7;
}

div input {
    padding:5px;
    font-size:11pt;
    background-color: #0B7DAB;
    color: white;
     border-radius:15px;
     -moz-border-radius:15px;
     -webkit-border-radius:15px;
    border: none;
}

score 3 · Answer 2 · answered Jun 08 '16 at 10:27

If anyone is wondering if it is possible in 2016, but it can be achieved using only css, with :valid selector:

HTML:

<div class="holder">
<input type="text" placeholder="" required="required">
<span class="placeholder">Name <span>*</span></span>
</div>

CSS:

.holder {
  position: relative;
}

input[required="required"]:valid + .placeholder {
  display: none;
}

.placeholder {
  position: absolute;
  top: 2px;
  left: 2px;
  color: green;

}

.placeholder span {
  color: red;
}

demo fiddle

Apply multiple styles to a single placeholder in an input element

2 Answers2

Linked

Related