CSS를 사용하여 자리 표시자 스타일을 수정하는 방법 소개(코드 예)

이 글은 CSS를 사용하여 자리표시자 스타일을 수정하는 방법을 소개합니다. 필요한 친구가 참고할 수 있기를 바랍니다.

프로젝트 사용자는 종종 입력 자리 표시자의 색상을 수정해야 하는 경우가 있습니다. 다음은 CSS로 자리 표시자를 설정하는 방법입니다.

먼저 Chrome의 기본 입력 스타일을 살펴보겠습니다

<input>

(placeholder)

(입력 스타일)

placeholder와 input의 기본 색상이 살짝 다른 것을 확인할 수 있습니다. 이제 입력placeholder和input的默认颜色是有点区别的。现在我们来修改input 的颜色

<input>

(placeholder)

(input)

不难发现color属性只能改变输入值的颜色，placeholder的颜色没人任何变化。so，如何来改变placeholder的颜色。

要改变placeholder的颜色就要使用到伪类::placeholder

<input>

(placeholder)

(input)

需要注意的是::palceholder伪类的兼容性，以上是在chrome浏览器的运行结果，同样的代码在IE11中就成了这样

(placeholder - ie11)

(input - ie11)

IE解决方案:

首先IE9及以下不支持placeholder。IE10需要用:-ms-input-placeholder,并且属性需要加上!important

<input>

(placeholder)

(입력)

color 속성은 입력값의 색상만 변경할 수 있다는 것을 어렵지 않게 찾아보실 수 있고, placeholder아무도 색상이 변하지 않습니다. 그럼 자리 표시자의 색상을 변경하는 방법은 무엇입니까?

placeholder의 색상을 변경하려면 의사 클래스 ::placeholder

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile >12
   - Android Browser 2.1-4.4.4
   - Samsung Internet
   - UC Browser for Android
   - QQ Browser */
::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 4-18 */
:-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 19-50 */
::-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    color: #ccc !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* CSS Working Draft */
::placeholder {
    color: #ccc;
    font-weight: 400;
}

(placeholder)

🎜🎜(입력)🎜🎜🎜🎜주의해야 할 것은 ::palceholder유사 클래스 호환성, 위는 크롬 브라우저에서 실행한 결과이며, 동일한 코드는 IE11🎜🎜(placeholder - ie11)🎜🎜<img src="https://img.%20php%20.cn//upload/image/324/410/326/154184213260616CSS%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC%20%EC%9E%90%EB%A6%AC%20%ED%91%9C%EC%8B%9C%EC%9E%90%20%EC%8A%A4%ED%83%80%EC%9D%BC%EC%9D%84%20%EC%88%98%EC%A0%95%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%20%EC%86%8C%EA%B0%9C(%EC%BD%94%EB%93%9C%20%EC%98%88)" title="154184213260616CSS를 사용하여 자리 표시자 스타일을 수정하는 방법 소개(코드 예)" alt="CSS를 사용하여 자리 표시자 스타일을 수정하는 방법 소개(코드 예)">🎜🎜(입력 - ie11)🎜🎜<img src="https%20:%20//img.php.cn//upload/image/442/450/843/154184213787040CSS%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC%20%EC%9E%90%EB%A6%AC%20%ED%91%9C%EC%8B%9C%EC%9E%90%20%EC%8A%A4%ED%83%80%EC%9D%BC%EC%9D%84%20%EC%88%98%EC%A0%95%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%20%EC%86%8C%EA%B0%9C(%EC%BD%94%EB%93%9C%20%EC%98%88)" title="154184213787040CSS를 사용하여 자리 표시자 스타일을 수정하는 방법 소개(코드 예)" alt="CSS를 사용하여 자리 표시자 스타일을 수정하는 방법 소개(코드 예)">🎜🎜IE 솔루션:🎜🎜첫 번째 IE9 및 아래에서는 자리 표시자가 지원되지 않습니다. IE10에서는 <code>:-ms-input-placeholder를 사용해야 하며 우선순위를 높이려면 !important와 함께 속성을 추가해야 합니다. 🎜rrreee🎜(placeholder ie11)🎜🎜🎜🎜🎜(input ie11)🎜🎜🎜🎜🎜나중에 다른 브라우저에 대한 적응 솔루션을 제공할 예정입니다🎜rrreee🎜요약: 위 내용은 이 글의 전체 내용입니다. 모두에게 도움이 됩니다. 학습이 도움이 됩니다. 🎜

위 내용은 CSS를 사용하여 자리 표시자 스타일을 수정하는 방법 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!