2012-07-09 7 views
4

입력 필드의 배경색이 변경되면 자리 표시 자 색상이 너무 많이 혼합되는 문제가 있습니다.jQuery가 설정되면 : -moz-placeholder 색상을 어떻게 변경합니까?

나는 이미 읽을 수있는 텍스트 색상 문제를 해결하여 적절한 밝거나 어두운 색상을 올바르게 반환합니다.

CSS 속성을 특정 입력 상자의 계산 된 색으로 설정하는 방법을 모르겠다. 약간의 지침을 주시겠습니까?

input:-moz-placeholder 
{ 
    color: #BBBBBB; 
} 
input::-webkit-input-placeholder 
{ 
    color: #BBBBBB; 
} 

반환 색상은 #222222이지만 직접 아니라 요소 요소의 CSS를 대상으로하기 때문에 $('#input').css() 호출이 작동하지 않습니다.

이 솔루션에서

답변

6

, 내가 먼저 동적 페이지로드에 < 머리 >에 스타일 블록을 추가합니다

// add style block to the <head> with default placeholder css on page load 
var defaultColor = 'BBBBBB'; 
var styleContent = 'input:-moz-placeholder {color: #' + defaultColor + ';} input::-webkit-input-placeholder {color: #' + defaultColor + ';}'; 
var styleBlock = '<style id="placeholder-style">' + styleContent + '</style>'; 
$('head').append(styleBlock); 

을 그리고, 난 그냥 스타일 블록의 내용을 업데이트 자리 표시 자 텍스트 색상을 변경하려면 :

를 jsFiddle 밖으로
var randomColor = Math.floor(Math.random()*16777215).toString(16); 
styleContent = 'input:-moz-placeholder {color: #' + randomColor + ';} input::-webkit-input-placeholder {color: #' + randomColor + ';}' 
$('#placeholder-style').text(styleContent); 

확인 :

Change placeholder text color with jQuery

+0

이 위대한 솔루션에 대해 감사드립니다. 그것은 매력처럼 일했습니다 : D –

관련 문제