2016-06-08 4 views
1

가정하자 내가자리의 한 단어의 색상을 변경하려면 어떤 방법이 있나요

<input type="text" placeholder="I am placeholder"> 

나는 우리가 같이 자리 색상을 변경할 수 있지만, 한 단어의 색상을 변경할 수있는 방법이 CSS로 알고있는이 텍스트 필드에만 .

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    color: pink; 
} 
::-moz-placeholder { /* Firefox 19+ */ 
    color: pink; 
} 
:-ms-input-placeholder { /* IE 10+ */ 
    color: pink; 
} 
:-moz-placeholder { /* Firefox 18- */ 
    color: pink; 
} 

이 코드는 완전한 자리 색상을 변경하지만 난 당신이 가능한 표준 자리 함께 할 수없는 경우에만 대신 전체 I am placeholder

+1

Nope! 나는 그런 존재가 있다고 생각하지 않는다. 이를 위해 JS를 사용하는 것이 좋습니다. –

+0

[입력 위치 지정자의 개별 부분을 어떻게 스타일링 할 수 있습니까?] (http://stackoverflow.com/questions/22655493/how-can-i-style-individual-parts-of-an-input-placeholder) –

답변

1

:

label { 
 
    display: inline-block; 
 
} 
 
label>span { 
 
    position: absolute; 
 
    padding-left: 3px; 
 
} 
 
label>span span { 
 
    color: blue 
 
} 
 
input { 
 
    position: relative; 
 
    background: white; 
 
} 
 
input:invalid { 
 
    background: none; 
 
}
<label> 
 
    <span>I am <span>placeholder</span></span> 
 
    <input type="text" required /> 
 
</label>
:

label { 
 
    display: inline-block; 
 
    background: linear-gradient(to right, red 2.2em, blue 2.2em); 
 
    border: inset; 
 
    /* border here instead input */ 
 
    font-family: monospace; 
 
    /* less surprise about length of text at screen */ 
 
} 
 
input { 
 
    box-shadow: inset 0 0 0 2em white; 
 
    /* covers the background, needed for the blending */ 
 
} 
 
input:invalid { 
 
    /* color part of text only when placeholder is shown */ 
 
    mix-blend-mode: screen; 
 
} 
 
/* snippet disclaimer */ 
 

 
.disclaim { 
 
    mix-blend-mode: screen; 
 
} 
 
body { 
 
    background: white; 
 
}
<label> 
 
    <input placeholder="I am placeholder" required /> 
 
</label> 
 
<p class="disclaim">not avalaible yet for <span>'your browser',</span> please be patient.</p>
그렇지

당신이 HTML과 텍스트를 사용합니다

+0

'mix-blend-mode'에 대해 조금 설명해 주시겠습니까 –

+0

@ GauravAggarwal mix-blend-mode는 다른 스태킹 구성 요소가 서로 다른 필터를 통해 색상을 섞을 수있게합니다. https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode. 여기서는 어두운 부분을 혼합하여 흰색이없는 곳의 그라디언트 색상과 혼합 할 수 있습니다. 각 값마다 다른 효과가 있습니다. –

+0

그래서 색상 영역의 크기도 조정할 수 있습니까? –

1

에 단어 placeholder의 색상을 변경하고 싶습니다. 대신 div을 입력하고 입력 요소와이 입력 요소 안에 요소 (span/p 요소)를 넣고 입력 요소에 span/p 요소를 넣고이 div 및 위치 span/p을 숨기십시오. 이 같은

뭔가 : 당신은 mix-blend-mode에서 좀 걸릴 수 있습니다 link

관련 문제