지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > CSS 입력 스타일을 수정하는 방법

CSS 입력 스타일을 수정하는 방법

藏色散人
풀어 주다： 2023-01-05 16:09:34
원래의
7596명이 탐색했습니다.

CSS 입력 스타일을 수정하는 방법: 1. 의사 클래스 요소를 사용하여 라디오 스타일을 변경합니다. 2. 레이블을 사용하여 입력을 지정한 다음 레이블 스타일을 변경하여 효과를 얻습니다.

CSS 입력 스타일을 수정하는 방법

이 문서의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터, HTML5&&CSS3 버전.

입력 상자 스타일을 변경하는 Css

현재 블로거는 두 가지 방법만 알고 있습니다. 다른 방법이 있는 학생이 있으면 토론해 보세요.

첫 번째: 의사 클래스 요소를 사용하여 라디오 스타일을 변경합니다(이 방법에는 필요하지 않음). 추가 태그 추가, 더 편리함)

1

2

3

4

5

6

7

.div input[type=radio]::after {

　　　position: absolute;

　　　width: 25px;

　　　height: 25px;

　　　background: url(../img/inputBG.jpg) no-repeat;

　　　background-size: 100% 100%;

　}

로그인 후 복사

둘: 라벨을 사용하여 입력을 가리키고 라벨 스타일을 변경하여 효과를 얻습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<html>　　

　　　<input type="checkbox" checked="checked" id="aa"/><label for="aa"></label>

　</html>

　<style>

　　　input[type=checkbox]{

　　　　　 visibility: hidden;

　　　}

　　　label{

　　　　　width:20px;

　　　　　height:20px;

　　　　　border:1px solid #707070;

　　　}

　　　input[type=checkbox]:checked + label{

　　　　　background: url(../img/duigou.jpg)no-repeat;

　　　　　background-size: 100% 100%;

　　　}

　</style>

로그인 후 복사

[추천 학습: css 비디오 튜토리얼]

위 내용은 CSS 입력 스타일을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css input
이전 기사：CSS 입력 상자를 편집 불가능하게 만드는 방법 다음 기사：CSS에서 최대 너비를 설정하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Eclipse에서 CSS 파일을 만들었습니다. CSS 코드 자동 프롬프트를 설정할 수 있나요?
에서 1970-01-01 08:00:00
0
0
0
javascript - 반응이 CSS 파일을 가져오고 "../../css/style.css" 모듈을 찾을 수 없다는 메시지를 표시합니다.
에서 1970-01-01 08:00:00
0
0
0
CSS 색상 변수 - CSS 색상을 정의할 때 규칙 또는 선택기가 필요합니다.
에서 1970-01-01 08:00:00
0
0
0
새 CSS 파일을 사용하여 기존 웹사이트 스타일을 덮어씁니다.
에서 1970-01-01 08:00:00
0
0
0
Sass 오류: 파일이 이미 로드되었습니다: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss
에서 1970-01-01 08:00:00
0
0
0
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿