CSS를 사용하여 브라우저가 양식에 할당한 기본 스타일을 제거하는 방법

양식을 작성할 때 일부 브라우저에서는 양식에 기본 스타일을 할당하는 것을 볼 수 있습니다. 예를 들어 Chrome 브라우저에서는 포커스를 로드할 때 텍스트 상자와 드롭다운 선택 상자에 빛나는 테두리가 표시됩니다. Firefox 및 Google Chrome에서는 여러줄 텍스트 상자텍스트 영역을 자유롭게 드래그하여 확대할 수 있습니다. 또한 IE10에서는 텍스트 상자에 내용을 입력하면 오른쪽에 작은 십자가가 나타납니다. 포크, 잠깐만요. 이러한 효과로 인해 사용자 경험이 향상되었다는 것은 의심의 여지가 없지만 때로는 이러한 기본 스타일이 필요하지 않은 경우 어떻게 해야 할까요? 솔루션을 별도로 살펴 보겠습니다.

1. Chrome 및 기타 브라우저에서 텍스트 상자의 기본 빛나는 테두리를 제거합니다.

input:focus, textarea:focus {
    outline: none;
}

강조표시 스타일 제거:

input:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-user-modify:read-write-plaintext-only;
}

물론 그 이후로 텍스트 상자에 포커스가 로드되면 모든 브라우저에서 텍스트 상자의 테두리 색상이나 스타일이 변경되지 않지만 다음과 같이 필요에 따라 다시 설정할 수 있습니다.

input:focus,textarea:focus {
    outline: none;
    border: 1px solid #f60;
}

이 경우 텍스트 상자에 포커스가 로드되면 테두리 색상이 주황색으로 변경되어 사용자에게 피드백을 제공합니다.

2. IE10+ 브라우저에서 텍스트 상자 뒤의 작은 십자가를 제거하세요

다음 문장만 있어도 괜찮습니다

3. 텍스트 상자

의 텍스트 영역을 드래그하고 아래와 같이 속성 을 추가합니다. 여러 줄의 텍스트 상자는 드래그하여 확대하거나 축소할 수 없습니다.

input::-ms-clear {
    display: none;
}

여기서 크기 조정 속성을 언급하면 ​​이는 요소 크기 조정에 사용되는 CSS3 속성입니다.

없음 기본값

모두 가로 및 세로를 허용합니다. 스케일링

horizontal은 수평 스케일링만 허용

vertical은 수직 스케일링만 허용

텍스트 영역 요소뿐만 아니라 div 등 대부분의 요소에도 적용됩니다. , 여기에는 없지만 하나씩 나열하지만 텍스트 영역과 다릅니다. div를 사용할 때 overflow: auto;를 추가해야 합니다. 즉, 이것이 효과적입니다:

textarea {
    resize: none;
}

위 내용은 CSS를 사용하여 브라우저가 양식에 할당한 기본 스타일을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!