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으로 설정할 수 있습니다.

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

이 기사의 사례를 읽은 후 방법을 마스터하면 더 흥미로운 일이 있을 것입니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목하세요!

추천 도서:

css3 애니메이션 시퀀스 애니메이션

CSS 이상한 상자 모델 및 표준 상자 모델 사용 방법

위 내용은 CSS로 입력 커서 숨기기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!