반드시 알아야 할 CSS 사용자 정의 코드 5가지

페이지를 만들 때 일부 태그(예: 입력 자리 표시자 등)의 기본 동작을 맞춤설정해야 하는 경우가 종종 있지만 이러한 기본 설정의 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 코드가 있다면 자유롭게 추가해 주세요.

【관련 추천】

1. 무료 CSS 온라인 동영상 튜토리얼

CSS 온라인 매뉴얼

3. php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼

위 내용은 반드시 알아야 할 CSS 사용자 정의 코드 5가지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!