라디오 선택 및 체크 선택 스타일 미화에 대한 자세한 그래픽 및 텍스트 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

라디오 선택 및 체크 선택 스타일 미화에 대한 자세한 그래픽 및 텍스트 설명

php中世界最好的语言

Mar 22, 2018 pm 01:10 PM

그래픽 및 텍스트 스타일 멋있게 하다

이번에는 단일 선택 및 다중 선택 스타일을 아름답게 만드는 방법에 대한 자세한 그림과 텍스트 설명을 가져옵니다. 살펴보자.

머리말
양식 요소에서

라디오 버튼

및 확인 버튼이 선택 상태와 선택 해제 상태로 되어 있다는 사실은 모두가 알고 있을 것입니다. 이 두 버튼의 기본 스타일을 재정의하는 것은 어렵습니다. CSS3에서는 상태 선택기 ":checked"와 기타 태그를 통해 사용자 정의 스타일을 구현할 수 있습니다. CSS3를 사용하면 매우 개인화된 사용자 양식을 만들 수 있습니다. 이 기사에서 얻은 효과는 매우 좋습니다. 관심 있는 친구들이 함께 와서 배울 수 있습니다.

렌더링은 다음과 같습니다

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选单选样式</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    form {
      border: 1px solid #ccc;
      padding: 20px;
      width: 300px;
    }
    .wrapper {
      margin-bottom: 10px;
    }
    /*复选框*/
    .checkbox-box {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      position: relative;
      border: 2px solid orange;
      vertical-align: middle;
    }
    .checkbox-box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
      z-index:10;
    }
    .checkbox-box span {
      position: absolute;
      top: -10px;
      right: 3px;
      font-size: 30px;
      font-weight: bold;
      font-family: Arial;
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
      color: orange;
    } 
    .checkbox-box input[type="checkbox"] + span {
      opacity:0;
    }
    .checkbox-box input[type="checkbox"]:checked + span {
      opacity: 1;
    }
    /*单选框*/
    .redio-box {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 10px;
      position: relative;
      background: orange;
      vertical-align: middle;
      border-radius: 100%;
    }
    .redio-box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height:100%;
      z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
    }
    .redio-box span { 
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      position: absolute;
      background: #fff;
      top: 50%;
      left:50%;
      margin: -5px 0  0 -5px;
      z-index:1;
    }
    .redio-box input[type="radio"] + span {
      opacity: 0;
    }
    .redio-box input[type="radio"]:checked + span {
      opacity: 1;
    }
</style>
<body>
<h2>复选框：</h2>
<form action="#">
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox" checked id="usename" />
      <span>√</span>
    </p>
    <label for="usename">体育</label>
  </p>
  
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"  id="usepwd" />
      <span>√</span>
    </p>
    <label for="usepwd">音乐</label>
  </p>
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"  id="checkbox3" />
      <span>√</span>
    </p>
    <label for="checkbox3">读书</label>
  </p>
  
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"   id="checkbox4" />
      <span>√</span>
    </p>
    <label for="checkbox4">运动</label>
  </p>
</form> 
<h2>单选框</h2>
<form action="#">
  <p class="wrapper">
    <p class="redio-box">
      <input type="radio" checked="checked"  id="boy" name="1" /><span></span>
    </p>
    <label for="boy">男</label>
  </p>
  
  <p class="wrapper">
    <p class="redio-box">
      <input type="radio"  id="girl" name="1" /><span></span>
    </p>
    <label for="girl">女</label>
  </p>
</form> 
</body>
</html>

로그인 후 복사

참고: +는 CSS의 인접 선택자입니다.

관계 선택자는 공백 > + ~(선택자, 하위 선택자, 인접 선택자, 형제 선택자 포함) 4개만 있습니다. 이 기사 방법에 대한 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7564

Cakephp 튜토리얼

1386

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

100

Related knowledge

macOS: 데스크탑 위젯의 색상을 변경하는 방법 Oct 07, 2023 am 08:17 AM

macOS Sonoma에서는 이전 버전의 Apple macOS에서처럼 위젯을 화면 외부에 숨기거나 알림 센터 패널에서 잊어버릴 필요가 없습니다. 대신 Mac의 데스크탑에 직접 배치할 수 있으며 대화형이기도 합니다. 사용하지 않을 때 macOS 데스크탑 위젯은 단색 스타일로 배경으로 페이드되어 방해 요소를 줄이고 활성 애플리케이션이나 창에서 진행 중인 작업에 집중할 수 있도록 해줍니다. 그러나 바탕 화면을 클릭하면 풀 컬러로 돌아갑니다. 단조로운 모양을 선호하고 데스크탑의 통일성을 유지하고 싶다면 영구적으로 만드는 방법이 있습니다. 다음 단계에서는 이 작업이 수행되는 방법을 보여줍니다. 시스템 설정 앱을 엽니다.

WordPress 웹 페이지 정렬 문제 해결 가이드 Mar 05, 2024 pm 01:12 PM

잘못 정렬된 WordPress 웹 페이지 해결 가이드 WordPress 웹 사이트 개발 시 때로는 웹 페이지 요소가 잘못 정렬되는 경우가 있습니다. 이는 다양한 장치의 화면 크기, 브라우저 호환성 또는 부적절한 CSS 스타일 설정 때문일 수 있습니다. 이러한 잘못된 정렬을 해결하려면 문제를 주의 깊게 분석하고, 가능한 원인을 찾아 단계별로 디버그하고 복구해야 합니다. 이 문서에서는 몇 가지 일반적인 WordPress 웹 페이지 정렬 문제와 해당 솔루션을 공유하고 개발에 도움이 되는 특정 코드 예제를 제공합니다.

ThinkPHP6을 사용하여 아름다운 404 페이지 구현 Jun 20, 2023 am 11:06 AM

인터넷이 발전하면서 많은 웹사이트나 애플리케이션이 점점 더 복잡해지고 있습니다. 사용자가 이를 사용할 때 종종 오류 페이지가 발생하는데, 가장 일반적인 것은 404 페이지입니다. 404 페이지는 접속 중인 페이지가 존재하지 않는다는 의미로 흔히 발생하는 오류 페이지입니다. 웹사이트나 애플리케이션의 경우 아름다운 404 페이지가 사용자 경험을 크게 향상시킬 수 있습니다. 이 기사에서는 ThinkPHP6을 사용하여 아름다운 404 페이지를 빠르게 구현하는 방법을 소개합니다. 경로 생성 먼저 경로 폴더에 오류를 생성해야 합니다.

CSS 웹 배경 이미지 디자인: 다양한 배경 이미지 스타일 및 효과 만들기 Nov 18, 2023 am 08:38 AM

CSS 웹 페이지 배경 이미지 디자인: 다양한 배경 이미지 스타일과 효과를 생성합니다. 구체적인 코드 예제가 필요합니다. 요약: 웹 디자인에서 배경 이미지는 페이지의 매력과 가독성을 효과적으로 향상시킬 수 있는 중요한 시각적 요소입니다. 이 문서에서는 몇 가지 일반적인 CSS 배경 이미지 디자인 스타일과 효과를 소개하고 해당 코드 예제를 제공합니다. 독자는 더 나은 시각 효과와 사용자 경험을 얻기 위해 자신의 필요와 선호도에 따라 이러한 배경 이미지 스타일과 효과를 선택하고 적용할 수 있습니다. 키워드: CSS, 배경 이미지, 디자인 스타일, 효과, 코드 표현

Java 13의 새로운 JavaFX CSS 스타일시트로 사용자 인터페이스를 아름답게 만드세요. Jul 30, 2023 pm 02:49 PM

Java13의 새로운 JavaFXCSS 스타일 시트를 사용하여 사용자 인터페이스를 아름답게 만들기 소개: 소프트웨어 개발에서 사용자 인터페이스의 아름다움과 사용 편의성은 사용자 경험을 향상시키는 데 매우 중요합니다. JavaFX는 풍부한 UI 구성 요소와 기능을 제공하는 Java 플랫폼의 현대적이고 표현력이 풍부한 인터페이스 기술입니다. 사용자 인터페이스를 더욱 아름답게 만들기 위해 JavaFX는 인터페이스를 아름답게 만들고 사용자 정의할 수 있는 CSS 스타일 시트를 제공합니다. Java13에서 JavaFX는 새로운 CSS 스타일 시트를 도입했습니다.

말을 아름답게 하는 방법 Mar 19, 2024 pm 08:31 PM

우리는 워드 문서를 편집할 때 항상 문서를 더욱 아름답고 아름답게 만들고자 합니다. 그러나 워드 미화에 관해서는 많은 사람들이 글꼴과 색상을 더욱 개인화하고 여백과 줄 간격을 조정한다고 생각합니다. 사실, 더 많은 작업을 통해 단어를 더 아름답게 만들 수 있습니다. 예를 들어 그림 삽입, 테두리 수정 등을 통해 단어 문서를 더 아름답게 만들 수 있습니다. 다음으로 테두리 패턴을 활용해 워드 문서를 더욱 아름답게 만들어 보겠습니다. 함께 배워볼까요! 먼저 새 Word 문서를 열고 [홈] 탭에서 [단락] 도구를 찾으세요. 그런 다음 이미지에 빨간색 화살표로 표시된 대로 [테두리] 옵션을 클릭하세요. 2. 클릭하면 시스템이 자동으로 드롭다운 선택 항목을 표시합니다.

:nth-last-child(2) 의사 클래스 선택기를 사용하여 마지막에서 두 번째 하위 요소의 스타일을 선택하세요. Nov 20, 2023 am 11:22 AM

끝에서 두 번째 자식 요소의 스타일을 선택하려면 :nth-last-child(2) 의사 클래스 선택기를 사용하세요. CSS에서 의사 클래스 선택기는 선택하는 데 사용할 수 있는 매우 강력한 도구입니다. 문서 트리. 그 중 하나는 :nth-last-child(2) 가상 클래스 선택기인데, 이는 마지막에서 두 번째 자식 요소를 선택하고 여기에 스타일을 적용합니다. 먼저 이 의사 클래스 선택기를 사용할 수 있도록 샘플 HTML 문서를 만들어 보겠습니다. ~에 의해

문서의 루트 요소 스타일을 선택하려면 :root 의사 클래스 선택기를 사용하세요. Nov 20, 2023 pm 02:18 PM

:root 의사 클래스 선택기를 사용하여 문서의 루트 요소 스타일을 선택하려면 특정 코드 예제가 필요합니다. CSS에서는 :root 의사 클래스 선택기를 사용하여 문서의 루트 요소를 선택하고 특정 스타일을 지정할 수 있습니다. 그것을 위해. :root 의사 클래스 선택기는 대부분의 경우 html 요소를 선택하는 것과 동일하지만 문서에 네임스페이스가 있는 경우 :root 의사 클래스 선택기는 기본 네임스페이스의 루트 요소를 선택합니다. 다음은 :root 의사 클래스 선택기를 사용하여 문서의 루트 요소를 선택하는 방법을 보여주는 구체적인 코드 예제입니다.

See all articles