Aidan Ewen Aidan Ewen - 1 year ago 40
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?


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;