질문자 :Community Wiki
Chrome은 input[type=text] 요소에 대한 자리 표시자 속성 을 지원합니다(다른 사람들도 마찬가지일 것입니다).
그러나 다음 CSS는 자리 표시자의 값에 아무 것도 하지 않습니다.
input[placeholder], [placeholder], *[placeholder] { color: red !important; } <input type="text" placeholder="Value"> 그러나 Value 은 여전히 red 대신 grey 유지됩니다.
자리 표시자 텍스트의 색상을 변경하는 방법이 있습니까?
세 가지 다른 구현이 있습니다: 의사 요소, 의사 클래스 및 없음.
::-webkit-input-placeholder 있습니다. [ 참조 ]:-moz-placeholder ( 콜론 1개 )를 사용합니다. [ 참조 ]::-moz-placeholder 하고 있지만 이전 선택기는 한동안 계속 작동합니다. [ 참조 ]:-ms-input-placeholder 있습니다. [ 참조 ]::placeholder [ Ref ]를 지원합니다. Internet Explorer 9 이하에서는 placeholder 속성을 전혀 지원하지 않는 반면 Opera 12 이하 에서는 자리 표시자에 대한 CSS 선택기를 지원하지 않습니다.
최선의 구현에 대한 논의는 여전히 진행 중입니다. 유사 요소는 Shadow DOM의 실제 요소처럼 작동합니다. input 의 padding 은 의사 요소와 동일한 배경색을 갖지 않습니다.
사용자 에이전트는 알 수 없는 선택자가 있는 규칙을 무시해야 합니다. 선택기 레벨 3 참조:
유효하지 않은 선택기를 포함하는 선택기 그룹이 유효하지 않습니다.
따라서 각 브라우저에 대해 별도의 규칙이 필요합니다. 그렇지 않으면 전체 그룹이 모든 브라우저에서 무시됩니다.
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #909; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #909; } ::placeholder { /* Most modern browsers support this now. */ color: #909; } <input placeholder="Stack Snippets are awesome!">opacity: 1em 하고 큰 최소 글꼴 크기 설정으로 테스트합니다. 번역을 잊지 마세요. 일부 언어는 동일한 단어에 대해 더 많은 공간이 필요합니다.placeholder 대한 HTML 지원은 있지만 이에 대한 CSS 지원(예: Opera)이 없는 브라우저도 테스트해야 합니다.input 유형( email , search )에 대해 추가 기본 CSS를 사용합니다. 이는 예상치 못한 방식으로 렌더링에 영향을 줄 수 있습니다. 속성 -webkit-appearance 및 -moz-appearance 를 사용하여 변경합니다. 예시: [type="search"] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } /* do not group these rules */ *::-webkit-input-placeholder { color: red; } *:-moz-placeholder { /* FF 4-18 */ color: red; opacity: 1; } *::-moz-placeholder { /* FF 19+ */ color: red; opacity: 1; } *:-ms-input-placeholder { /* IE 10+ */ color: red; } *::-ms-input-placeholder { /* Microsoft Edge */ color: red; } *::placeholder { /* modern browser */ color: red; } <input placeholder="hello"/> <br /> <textarea placeholder="hello"></textarea> input 및 textarea 자리 표시자의 스타일이 지정됩니다.
중요 참고 사항: 이러한 규칙을 그룹화하지 마십시오. 대신 모든 선택자에 대해 별도의 규칙을 만드십시오(그룹에 하나의 잘못된 선택자가 있으면 전체 그룹이 무효화됩니다).
텍스트 영역의 스타일을 지정할 수도 있습니다.
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #636363; } input:-moz-placeholder, textarea:-moz-placeholder { color: #636363; }Bootstrap 및 Less 사용자의 경우 mixin .placeholder가 있습니다.
// Placeholder text // ------------------------- .placeholder(@color: @placeholderText) { &:-moz-placeholder { color: @color; } &:-ms-input-placeholder { color: @color; } &::-webkit-input-placeholder { color: @color; } }toscho의 답변 외에도 주목할만한 CSS 속성이 지원되는 Chrome 9-10과 Safari 5 사이의 웹킷 불일치를 발견했습니다.
특히 Chrome 9 및 10은 자리 표시자의 스타일을 지정할 때 background-color , border , text-decoration 및 text-transform
전체 브라우저 간 비교는 여기에 있습니다 .
Sass 사용자의 경우:
// Create placeholder mixin @mixin placeholder($color, $size:"") { &::-webkit-input-placeholder { color: $color; @if $size != "" { font-size: $size; } } &:-moz-placeholder { color: $color; @if $size != "" { font-size: $size; } } &::-moz-placeholder { color: $color; @if $size != "" { font-size: $size; } } &:-ms-input-placeholder { color: $color; @if $size != "" { font-size: $size; } } } // Use placeholder mixin (the size parameter is optional) [placeholder] { @include placeholder(red, 10px); }이것은 잘 작동합니다. 여기 데모:
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; } input:-moz-placeholder, textarea:-moz-placeholder { color: #666; } input::-moz-placeholder, textarea::-moz-placeholder { color: #666; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #666; } <input type="text" placeholder="Value" />Firefox 및 Internet Explorer에서 일반 입력 텍스트 색상은 자리 표시자의 색상 속성보다 우선합니다. 그래서, 우리는해야합니다
::-webkit-input-placeholder { color: red; text-overflow: ellipsis; } :-moz-placeholder { color: #acacac !important; text-overflow: ellipsis; } ::-moz-placeholder { color: #acacac !important; text-overflow: ellipsis; } /* For the future */ :-ms-input-placeholder { color: #acacac !important; text-overflow: ellipsis; }autoprefixer 를 사용하는 경우 새로운 ::placeholder 를 사용하십시오.
이를 위해 Bootstrap 의 .placeholder mixin은 더 이상 사용되지 않습니다.
예시:
input::placeholder { color: black; }autoprefixer를 사용할 때 위의 내용은 모든 브라우저에 대해 올바른 코드로 변환됩니다.
브라우저 간 솔루션:
/* all elements */ ::-webkit-input-placeholder { color:#f00; } ::-moz-placeholder { color:#f00; } /* firefox 19+ */ :-ms-input-placeholder { color:#f00; } /* ie */ input:-moz-placeholder { color:#f00; } /* individual elements: webkit */ #field2::-webkit-input-placeholder { color:#00f; } #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } /* individual elements: mozilla */ #field2::-moz-placeholder { color:#00f; } #field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }크레딧: David Walsh
이제 입력의 자리 표시자에 CSS를 적용하는 표준 방법이 있습니다. ::placeholder pseudo-element from this CSS Module Level 4 Draft.
Mozilla Firefox 19+에 대해 브라우저가 자리 표시자에 대한 불투명도 값을 제공하므로 색상이 실제로 원하는 것이 아니라는 것을 깨달았습니다.
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #eee; opacity:1; } input:-moz-placeholder, textarea:-moz-placeholder { color: #eee; opacity:1; } input::-moz-placeholder, textarea::-moz-placeholder { color: #eee; opacity:1; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #eee; opacity:1; } opacity 를 덮어 쓰기 때문에 잘 될 것입니다.
인터넷에서 이 코드 조각을 어디에서 찾았는지 기억이 나지 않습니다(내가 작성한 것이 아니며 어디에서 찾았는지, 누가 작성했는지 기억나지 않음).
$('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).blur(function() { var input = $(this); if (input.val() == '' || input.val() == input.attr('placeholder')) { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }).blur(); $('[placeholder]').parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) });이 JavaScript 코드를 로드한 다음 다음 규칙을 호출하여 CSS로 자리 표시자를 편집하기만 하면 됩니다.
form .placeholder { color: #222; font-size: 25px; /* etc. */ }이 코드는 입력 유형 텍스트에만 자리 표시자가 필요하기 때문에 작동할 것이라고 생각합니다. 따라서 이 한 줄 CSS로 충분합니다.
input[type="text"]::-webkit-input-placeholder { color: red; }Bootstrap 사용자의 경우 class="form-control" 하는 경우 CSS 특성 문제가 있을 수 있습니다. 더 높은 우선순위를 얻어야 합니다.
.form-control::-webkit-input-placeholder { color: red; } //.. and other browsers또는 Less 를 사용하는 경우:
.form-control{ .placeholder(red); }Bootstrap 을 사용 중이고 이것이 작동하지 않는다면 아마도 Bootstrap 자체가 이러한 선택기를 추가한다는 사실을 놓쳤을 것입니다. 이것은 우리가 말하는 Bootstrap v3.3입니다.
.form-control CSS 클래스 내에서 자리 표시자를 변경하려는 경우 다음과 같이 재정의해야 합니다.
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #777; } .form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #777; opacity: 1; } .form-control::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #777; opacity: 1; } .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #777; }이것은 어떤가요
<input type="text" value="placeholder text" onfocus="this.style.color='#000'; this.value='';" style="color: #f00;" />CSS나 자리 표시자는 없지만 동일한 기능을 사용할 수 있습니다.
이 짧고 깔끔한 코드:
::-webkit-input-placeholder {color: red;} :-moz-placeholder {color: red; /* For Firefox 18- */} ::-moz-placeholder {color: red; /* For Firefox 19+ */} :-ms-input-placeholder {color: red;}모바일 플랫폼에서 색상을 변경하기 위해 여기에서 모든 조합을 시도했지만 결국 다음과 같았습니다.
-webkit-text-fill-color: red;트릭을 한 것.
Bourbon을 사용하는 SASS/SCSS 사용자의 경우 내장 기능이 있습니다.
//main.scss @import 'bourbon'; input { width: 300px; @include placeholder { color: red; } }CSS 출력에서 이 부분을 가져와서 코드에 붙여넣을 수도 있습니다.
//main.css input { width: 300px; } input::-webkit-input-placeholder { color: red; } input:-moz-placeholder { color: red; } input::-moz-placeholder { color: red; } input:-ms-input-placeholder { color: red; }다른 입력 요소에 대해 이 코드를 시도하십시오.
your css selector::-webkit-input-placeholder { /*for webkit */ color:#909090; opacity:1; } your css selector:-moz-placeholder { /*for mozilla */ color:#909090; opacity:1; } your css selector:-ms-input-placeholder { /*for for internet exprolar */ color:#909090; opacity:1; }예 1:
input[type="text"]::-webkit-input-placeholder { /*for webkit */ color: red; opacity:1; } input[type="text"]:-moz-placeholder { /*for mozilla */ color: red; opacity:1; } input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ color: red; opacity:1; }예 2:
input[type="email"]::-webkit-input-placeholder { /*for webkit */ color: gray; opacity:1; } input[type="email"]:-moz-placeholder { /*for mozilla */ color: gray; opacity:1; } input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ color: gray; }실제 매우 훌륭하고 간단한 가능성 추가: CSS 필터 !
자리 표시자를 포함하여 모든 항목의 스타일을 지정합니다.
다음은 색상 변경에 색조 필터를 사용하여 동일한 팔레트에 input 요소를 모두 설정합니다. 이제 브라우저에서 매우 잘 렌더링됩니다(예: 제외).
input { filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%); } <input placeholder="Hello world!" /> <input type="date" /><br> <input type="range" /> <input type="color" />사용자가 변경 사항에 대한 입력 유형 색상을 사용하여 동적으로 변경할 수 있도록 하거나 뉘앙스를 찾으려면 다음 스니펫을 확인하세요.
발신: https://codepen.io/Nico_KraZhtest/pen/bWExEB
function stylElem() { stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0) Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){ e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)" out.innerText = e.style.cssText })()} stylElem() body {background: black; color: white} Choose a color! <input type="color" id="stylo" oninput="stylElem()"> <br> <div id="out"></div> <p> <input placeholder="Hello world!" /> <input type="date" /><br> <input type="range" /> <br> <audio controls src="#"></audio> <br><br> <video controls src="#"></video>CSS 필터 문서: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
다음은 한 가지 예입니다.
.form-control::-webkit-input-placeholder { color: red; width: 250px; } h1 { color: red; } <div class="col-sm-4"> <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/> </div>좋아, 자리 표시자는 다른 브라우저에서 다르게 작동하므로 CSS에서 브라우저 접두사를 사용하여 동일하게 만들어야 합니다. 예를 들어 Firefox는 기본적으로 자리 표시자에 투명도를 제공하므로 CSS에 불투명도 1을 추가하고 색상을 추가해야 합니다. 대부분의 경우 큰 관심사이지만 일관성을 유지하는 것이 좋습니다.
*::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc; } *:-moz-placeholder { /* Mozilla Firefox <18 */ color: #ccc; opacity: 1; } *::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ccc; opacity: 1; } *:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ccc; }CSS를 사용하여 HTML5 입력의 자리 표시자 색상을 변경할 수 있습니다. 우연히 CSS가 충돌하고 이 코드 노트가 작동한다면 아래와 같이 (!important)를 사용할 수 있습니다.
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:#909 !important; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#909 !important; opacity:1 !important; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#909 !important; opacity:1 !important; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color:#909 !important; } ::-ms-input-placeholder { /* Microsoft Edge */ color:#909 !important; } <input placeholder="Stack Snippets are awesome!">이것이 도움이 되기를 바랍니다.
다음과 같이 입력 및 포커스 스타일에 사용할 수 있습니다.
input::-webkit-input-placeholder { color:#666;} input:-moz-placeholder { color:#666;} input::-moz-placeholder { color:#666;} input:-ms-input-placeholder { color:#666;} /* focus */ input:focus::-webkit-input-placeholder { color:#eee; } input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */ input:focus::-moz-placeholder { color:#eee } /* FF 19+ */ input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */CSS 선택기 가 있는 솔루션은 다음과 같습니다.
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; opacity: 1; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #909; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #909; }가장 쉬운 방법은 다음과 같습니다.
#yourInput::placeholder { color: red;/*As an example*/ } /* if that would not work, you can always try styling the attribute itself: */ #myInput[placeholder] { color: red; }Compass 에는 즉시 사용할 수 있는 믹스인이 있습니다.
예를 들어:
<input type="text" placeholder="Value">그리고 나침반을 사용하는 SCSS에서:
input[type='text'] { @include input-placeholder { color: #616161; } }HTML의 일부:
<form action="www.anything.com"> <input type="text" name="name" placeholder="Enter sentence"/> </form>CSS로 '문장 입력'의 표현 색상을 변경하는 방법을 보여 드리겠습니다.
::placeholder{ color:blue; }출처 : 여기를 클릭하세요
출처 : http:www.stackoverflow.com/questions/2610497/change-a-html5-inputs-placeholder-color-with-css
| Git 리포지토리에서 병합 충돌을 해결하는 방법 (0) | 2021.10.01 |
|---|---|
| JavaScript 링크에 "#" 또는 "javascript:void(0)" 중 어떤 "href" 값을 사용해야 합니까? (0) | 2021.09.30 |
| ActionScript 3에서 SOAP 웹 서비스에 "Null"(실제 성!)을 전달하는 방법 (0) | 2021.09.30 |
| Python에서 중첩 디렉토리를 어떻게 안전하게 만들 수 있습니까? (0) | 2021.09.30 |
| jQuery에서 확인란이 선택되어 있는지 어떻게 확인합니까? (0) | 2021.09.30 |