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?

Tapia

Its showing white color i checked please see demo jsbin.com/vufucubi/1 – Electrodynamometer

Interesting but I can't think of any way to do that. #2610997 – Shellacking

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). – Triadelphous

Answer 1

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

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

Fingerbreadth

Answer 2

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

Mogerly