페이지를 만들 때 일부 태그(예: 입력 자리 표시자 등)의 기본 동작을 맞춤설정해야 하는 경우가 종종 있지만 이러한 기본 설정의 CSS는 일반적으로 기억하기 어렵기 때문에 이를 수행해야 합니다. 스스로 기록하세요. 다음은 기본 동작을 재설정하는 데 자주 사용하는 CSS입니다.
1. 자리 표시자
태그에 자리 표시자 속성 을 설정할 때 필요에 따라 자리 표시자의 기본 색상이나 글꼴을 수정해야 하는 경우가 있습니다. 크기, 다음 CSS를 사용할 수 있습니다:
// firefox input::-moz-placeholder { color: red; font-size: 18px; } // IE input:-ms-input-placeholder { color: red; font-size: 18px; } // chrome input::-webkit-input-placeholder { color: red; font-size: 18px; }
브라우저마다 작성 방법이 다릅니다.
에는 해당 브라우저의 접두사(예: -webkit-)를 추가해야 합니다. );
Firefox의 자리표시자 앞에는 입력이 없습니다.
Firefox와 Chrome에는 모두 :: 두 개의 콜론이 있는 반면 IE에는 ::
낮은 버전이 있습니다. 브라우저 새 버전의 브라우저와 작성 방법이 다를 수 있습니다.
2. 드롭다운 상자의 작은 삼각형
일반적으로 선택 태그에는 작은 삼각형이 있습니다. 요구 사항을 충족하려면 이 작은 삼각형을 제거하거나 배경 이미지로 바꾸세요. 작은 삼각형의 CSS를 제거합니다:
-webkit-appearance: none; -moz-appearance: none;
현재 IE 브라우저에서는 작은 삼각형을 제거할 수 있는 방법이 없습니다.
3. input[type=number]
nput[type=number] 오른쪽에 있는 스피너는 일반적으로 모바일 기기에서 사용됩니다. 숫자 키보드에 익숙해지세요. 그러나 스피너가 나타나므로 일반적으로 필요하지 않습니다. 스피너를 제거하는 CSS는 다음과 같습니다:
// firefox input[type='number'] { -moz-appearance:textfield; } // chrome input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
4. -webkit-tap-highlight-color
모바일 브라우저(예: WeChat 및 QQ 내장 브라우저)에서 클릭하면 링크 또는 Javascript를 통해 정의된 클릭 가능한 요소에는 파란색 테두리가 표시됩니다. 저는 이 테두리를 싫어하므로 보통 제거합니다.
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
강조표시 색상을 투명으로 설정합니다. 파란색 테두리가 더 이상 표시되지 않습니다.
5. 스크롤 막대
이제 WebKit은 오버플로 속성, 목록 상자, 드롭다운 메뉴 및 텍스트 영역이 있는 영역에 대해 사용자 정의 스타일의 스크롤 막대를 지원합니다. 스크롤 막대를 제거해야 하는 경우가 있는데, 특히 페이지에 여러 개의 스크롤 막대가 있는 경우
::-webkit-scrollbar { width: 0; }
스크롤 막대를 제거하려면 스크롤 막대 너비를 0으로 설정하세요. 스크롤 막대 스타일을 사용자 정의해야 하는 경우 스크롤 막대 스타일을 사용자 정의하는 방법을 소개하는 www.xuanfengge.com/css3-webkit-scrollbar.html을 클릭할 수 있습니다.
위 내용은 기억하기 쉽지 않은 프로젝트에서 제가 자주 사용하는 CSS 코드를 기록한 것입니다. 친구도 자주 사용하는 기억하기 어려운 CSS 코드가 있다면 자유롭게 추가해 주세요.
【관련 추천】
3. php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼
위 내용은 반드시 알아야 할 CSS 사용자 정의 코드 5가지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!