투케이2K

66. (html/css/javascript/jquery) radio 라디오 버튼 그룹 생성 및 커스텀 색상 정의 실시 본문

FrontEnd

66. (html/css/javascript/jquery) radio 라디오 버튼 그룹 생성 및 커스텀 색상 정의 실시

투케이2K 2021. 7. 30. 08:12

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

[css 소스 코드]

    <!-- 내부 CSS 스타일 지정 -->
    <style>
		/* [html, body 영역 스타일 지정] */
		html, body {
			width : 100%;
			height : 100%;
			margin : 0;
			padding : 0;
			border : none;

			/* [모바일 스크롤 시 부드럽게 처리] */
			overflow:scroll-y; 
			-webkit-overflow-scrolling:touch;					
		}
		/* [body 스크롤바 메인 스타일 지정] */
		body::-webkit-scrollbar {			
			width: 0px;					
			background-color: #c1c1c1;
		}
		/* [body 스크롤바 thumb 스타일 지정] */
		body::-webkit-scrollbar-thumb {					
			background-color: #444444;
		}



		/* [라디오 버튼 커스텀 스타일 변경 실시] */
		input[type='radio'] {
			-webkit-appearance:none;
			width:17px;
			height:17px;
			/* [라디오 버튼 테두리 색상 정의] */
			border:1px solid darkgray;
			border-radius:50%;
			outline:none;
			/* [라디오 버튼 배경 색상 정의] */
			background:#ffffff;
		}
		input[type='radio']:before {
			/* [content null 설정해서 커스텀 지정] */
			content:'';
			display:block;
			width:70%;
			height:70%;
			margin: 15% auto;
			border-radius:50%;  
		}
		input[type='radio']:checked:before {
			/* [라디오 버튼이 클릭 되었을 경우 내부 원형 색상] */
			background:#007bff;
		}
        

    <style>

​

​

[body 소스 코드]

<body>

	<!-- [라디오 버튼 그룹 정의 = name 매칭] -->
	<input type="radio" name="qna_1_group" value="1"/>
	<input type="radio" name="qna_1_group" value="2"/>
	<input type="radio" name="qna_1_group" value="3"/>

</body>

[결과 출력]

​

 

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

68. (html/css/javascript/jquery) 로컬에 저장된 폰트 다중 호출 및 적용 방법 - font face , font family  (0) 2021.08.03
67. (html/css/javascript/jquery) 다중 배경 색상 지정 실시 - background linear gradient 사용  (0) 2021.08.03
65. (html/css/javascript/jquery) 모바일 스크롤 시 부드럽게 처리하기 - overflow scrolling  (0) 2021.07.30
64. (html/css/javascript/jquery) 커스텀 css : 반응형 모바일 설문 조사 화면 제작 실시  (0) 2021.07.29
63. (html/css/javascript/jquery) 외부 css , js 파일 생성 및 호출 방법 정의 - link , script  (0) 2021.07.29
'FrontEnd' Related Articles more
Comments