Aidan Ewen Aidan Ewen - 1 year ago 43
HTML Question

Apply multiple styles to a single placeholder in an input element

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 -

enter image description here

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?

Answer Source

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


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


$(function() {
    $("span.holder + input").keyup(function() {
        if($(this).val().length) {
        } else {
    $("span.holder").click(function() {


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 >{
    color: #819FF7;

div input {
    background-color: #0B7DAB;
    color: white;
    border: none;