CSS를 사용하여 HTML5 입력 자리 표시자 색상 변경
Chrome은 다음 위치에서 자리 표시자 속성을 지원합니다.input[type=text](어느쪽이든)
그러나 다음 CSS는 플레이스홀더 값에 영향을 주지 않습니다.
input[placeholder], [placeholder], *[placeholder] {
color: red !important;
}<input type="text" placeholder="Value"> ★★★★★★★★★★★★★★★★★.Value 남아 있다greyred.
자리 표시자 텍스트의 색상을 변경할 수 있는 방법이 있습니까?
실행
구현에는 의사 요소, 의사 클래스 및 nothing의 3가지가 있습니다.
- WebKit, Blink(Safari, Google Chrome, Opera 15+) Microsoft Edge를 사용합니다.
::-webkit-input-placeholder를 클릭합니다. - 4 ~Mozilla Firefox 4 ~18 을 .
:-moz-placeholder(1개의 대장).[Ref] - 19는 의사 Mozilla Firefox 19+를 .
::-moz-placeholder단, 오래된 셀렉터는 당분간 기능합니다.[Ref] - Internet Explorer 10 및은11 은 internet은은 。
:-ms-input-placeholder를 클릭합니다. - 2017년 4월: 대부분의 최신 브라우저는 단순한 유사 요소를 지원합니다.
9 Explorer 9를 .placeholder어트리뷰트는 전혀 없습니다만, Opera 12 이하에서는 플레이스 홀더에 대한 CSS 셀렉터는 지원되지 않습니다.
최적의 구현에 대한 논의는 아직 진행 중입니다.유사 요소는 섀도우 DOM의 실제 요소와 같은 역할을 합니다.apadding input을 사용법
CSS 실렉터
사용자 에이전트는 알 수 없는 셀렉터가 있는 규칙을 무시해야 합니다.'실렉터 레벨 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!">사용상의 주의
- ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★파이어폭스의되어 있는 것 같기 에 Firefox를 .
opacity: 1 - 않을 요소의 사이즈는 「」로 해 주세요.입력 요소의 사이즈는
em큰 최소 글꼴 크기 설정으로 테스트합니다.번역을 잊지 마세요.일부 언어에는 같은 단어를 넣을 수 있는 공간이 필요합니다. - 지원 (HTML 지원)
placeholder(오페라) CSS입니다. - 플레이스 홀더는 라벨을 대체할 수 없으므로 라벨도 가지고 있는지 확인합니다.
- 에서는 일부 CSS에 대해 CSS를 합니다.
input예:email,search이 경우 렌더링에 예기치 않은 영향을 미칠 수 있습니다.속성 사용-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플레이스 홀더
중요사항:이러한 규칙은 그룹화하지 마십시오.대신에, 실렉터 마다 다른 룰을 작성합니다(그룹내에서 무효인 실렉터가 1개 있으면, 그룹 전체가 무효가 됩니다).
텍스트 영역의 스타일을 지정할 수도 있습니다.
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #FF9900;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #FF9900;
}<textarea rows="4" cols="50" placeholder="Stack Snippets are nice!">
</textarea>Bootstrap 및 Less 사용자에게는 mixin .placeholder가 있습니다.
// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
&:-moz-placeholder {
color: @color;
}
&:-ms-input-placeholder {
color: @color;
}
&::-webkit-input-placeholder {
color: @color;
}
}
Toscho의 답변에 더해 Chrome 9-10과 Safari 5의 웹킷 불일치를 발견했는데, CSS 속성을 지원하는 것은 주목할 가치가 있습니다.
은 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;
}
는 CSS를 합니다.::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를 .「 CSS 」 。::placeholder이 CSS 모듈레벨 4 드래프트의 의사 요소
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;
}
를를 the the the the를 .opacity1 인 1 1 1 1 1 1 1 1 1 1 1 。
인터넷에서 이 코드 조각을 어디서 찾았는지 기억나지 않습니다(제가 쓴 것도 아니고 어디서 찾았는지, 누가 썼는지 기억나지 않습니다).
$('[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. */
}
부트스트랩 사용자의 경우class="form-control"CSS는 CSS를 참조해 주세요.우선도가 높아집니다.
.form-control::-webkit-input-placeholder {
color: red;
}
//.. and other browsers
또는 [Less]를 사용하는 경우:
.form-control{
.placeholder(red);
}
입력 타입의 텍스트에만 플레이스 홀더가 필요하기 때문에 이 코드가 동작할 것이라고 생각합니다.이 CSS는 다음 한 줄이면 충분합니다.
input[type="text"]::-webkit-input-placeholder {
color: 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;
그게 효과가 있었어
매우 심플하고 실제적인 가능성을 추가: 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" />사용자가 동적으로 변경할 수 있도록 하거나 변경에 입력 유형 색상을 사용하거나 뉘앙스를 찾으려면 다음 스니펫을 참조하십시오.
송신원: 코드펜
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
Burbon을 사용하는 SAS/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;
}
이것은 대부분의 최신 브라우저에 적합합니다.
input::placeholder{
color: red; // css implementation
}
SCSS를 사용하는 경우
input {
&::placeholder {
color: red; // scss
}
}
예를 하나 더 들어보겠습니다.
.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를 사용하여 HTML5 입력의 자리 표시자 색상을 변경할 수 있습니다.만약, CSS의 경합이 발생했을 경우, 이 코드 노트가 기능하는 경우는, 다음과 같이(!중요)를 사용할 수 있습니다.
::-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!">
이게 도움이 되길 바라.
네, 플레이스 홀더는 브라우저마다 동작이 다르기 때문에 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;
}
입력 및 포커스 스타일에 사용할 수 있습니다.
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+ */
가장 쉬운 방법은 다음과 같습니다.
#yourInput::placeholder {
color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
color: red;
}
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;
}
- WebKit, Blink(Safari, Google Chrome, Opera 15+) 및 Microsoft Edge는 다음과 같은 유사 요소를 사용합니다.
::-webkit-input-placeholder. - Mozilla Firefox 4 ~18은 의사 클래스를 사용하고 있습니다.
:-colon-placeholder(1개의 콜론).
Mozilla Firefox 19+는 의사 요소를 사용하고 있습니다.
::-selector-placeholder. 단, 오래된 셀렉터는 당분간 기능합니다. - Internet Explorer 10 및 11은 의사 클래스를 사용하고 있습니다.
:-ms-input-placeholder. - Internet Explorer 9 이하에서는 플레이스홀더 애트리뷰트가 전혀 지원되지 않습니다.Opera 12 이하에서는 플레이스홀더 CSS 셀렉터는 지원되지 않습니다.
::placeholder{
color: red;
}<input type="text" placeholder="Value">언급URL : https://stackoverflow.com/questions/2610497/change-a-html5-inputs-placeholder-color-with-css
'sourcetip' 카테고리의 다른 글
| ★★ ★★ ★★떤떤것 ?을 용? ???떤떤것 ?을 용? ???떤떤것 ?을 용? ??? (0) | 2023.04.08 |
|---|---|
| SQL에서 시간 없이 날짜를 선택하는 방법 (0) | 2023.04.08 |
| HTML 선택 요소에서 선택 옵션을 기본값으로 공백으로 설정합니다. (0) | 2023.04.08 |
| PowerShell 스크립트에서 스크립트 코드를 재사용/ Import하려면 어떻게 해야 합니까? (0) | 2023.04.08 |
| TextView에서 HTML을 표시하는 방법 (0) | 2023.04.08 |