CSS를 사용하여 입력 커서를 숨기는 방법 샘플 코드_CSS 튜토리얼_CSS_웹 페이지 제작

이 기사에서는 CSS를 사용하여 입력 커서를 숨기는 방법에 대한 관련 정보를 주로 소개합니다. 이는 최근 작업에서 발생하는 요구 사항이지만, 필요한 경우 해결책이 있습니다. 샘플 코드는 다음과 같습니다. CSS에 관심이 있는 친구들, 필요한 분들은 참고해서 배워보세요.

머리말

최근 회사 UI가 갑자기 나에게 와서 "작업에 영향을 주지 않고 입력 커서를 숨기는 방법은 무엇입니까?"라는 질문을 했습니다.

많은 사람들이 나와 같을 것이라고 생각하며 이것이 말도 안되는 요구 사항이라고 생각합니다. 입력 상자에 커서가 없는 것은 반인륜적이지 않습니까? 우리는 단지 작은 코더일 뿐이고 반박할 권리가 없으며 묵묵히 받아들일 수밖에 없다는 것이 안타깝습니다...

인터넷에서 검색하여 많은 방법을 찾았습니다: p 시뮬레이션 사용, 읽기 전용 설정, 비활성화 설정, 자동 흐림 설정 등. 어떤 방법도 요구 사항을 충족할 수 없다는 것을 알았고 마침내 위대한 신이 제공한 완벽한 솔루션을 찾았습니다.

방법은 다음과 같습니다.

먼저 커서를 숨깁니다

  <style>
    input{
      color: transparent;
    }
  </style>

커서가 텍스트를 따라가기 때문에 텍스트 색상을 투명하게 설정하면 커서가 사라집니다~

하지만 여기에 문제가 있습니다. 텍스트가 투명할 때 입력 상자를 어떻게 사용합니까? 걱정하지 마세요. 아래를 보세요~

텍스트 표시

  <style>
    input{
      color: transparent;
      text-shadow: 0 0 0 #000;
    }
  </style>

텍스트 그림자를 설정하세요. 텍스트는 투명하지만 텍스트 그림자를 사용하여 텍스트 색상을 바꿀 수 있습니다. 방법 완벽한 솔루션.

text-shadow 속성

구문:

text-shadow:x-offset y-offset blur color;

설명:

x-offset: (수평 그림자)는 수평 오프셋을 나타냅니다. 그림자 거리, 단위는 px, em 또는 백분율 등이 될 수 있습니다. 값이 양수이면 그림자는 오른쪽으로 오프셋되고, 값이 음수이면 그림자는 왼쪽으로 오프셋됩니다.

y-오프셋: (수직 그림자)는 그림자의 수직 오프셋 거리를 나타냅니다. px, em 또는 백분율 대기가 가능합니다. 값이 양수이면 그림자가 아래쪽으로 이동하고 값이 음수이면 그림자가 위쪽으로 이동합니다.

흐림: (흐림 거리)는 그림자의 흐림 정도를 나타내며 단위는 px, em 또는 백분율일 수 있습니다. , 등. 흐림 값은 음수일 수 없습니다. 값이 클수록 그림자가 더 흐려지고, 값이 작을수록 그림자가 더 선명해집니다. 물론 그림자 흐림 효과가 필요하지 않은 경우 흐림 값을 0으로 설정할 수 있습니다.

색상: (그림자의 색상)은 그림자의 색상을 나타냅니다.

요약

이상이 이 글의 모든 내용입니다. 모두에게 도움이 되기를 바랍니다. 도움을 가져오세요! !

관련 권장 사항:

이미지의 가로 배열 및 스크롤 효과를 얻기 위해 순수 CSS

css를 사용하여 텍스트 생략을 사용자 정의하는 포괄적인 방법

css 및 js 튜토리얼을 통해 팝- 로그인 중심 인터페이스

위 내용은 CSS를 사용하여 입력 커서를 숨기는 방법 샘플 코드_CSS 튜토리얼_CSS_웹 페이지 제작의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!