将多个样式应用于输入元素中的单个占位符 [英] Apply multiple styles to a single placeholder in an input element

问题描述

我在表单上有一个基本的输入元素 -

 < input type =textname =其中placeholder =位置或地点> 
  

但是我想用下面的设计来设置占位符的内容 -

>

目前我有以下样式 -

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

显然这不会处理浅蓝色或'我想用CSS3尽可能做到这一点。

解决方案

我看到的唯一解决方案是避免使用占位符和替换它与javascript的行为。旧样式！

查看此演示

 <$ c $> c>< div class =location> 
< span class =holder>位置< span class =blue>或< / span>放置< / span> 
< input id =inputsize =18type =text/>& nbsp; 
< / div> 
  

Javascript

  $（function（）{
 $（span.holder + input）。keyup（function（）{
 if（$（this）.val （）.length）{
 $（this）.prev（'span.holder'）。hide（）; 
} else {
 $（this）.prev '）.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输入{
 padding：5px; 
 font-size：11pt; 
 background-color：＃0B7DAB; 
 color：white; 
 border-radius：15px; 
 -moz-border-radius：15px; 
 -webkit-border-radius：15px; 
 border：none; 
} 
  

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?

解决方案

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

这篇关于将多个样式应用于输入元素中的单个占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！