Aidan Ewen Aidan Ewen - 5 months ago 16
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

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