라디오버튼이나 체크박스를 없애고 일반 버튼으로 수정할 수 있는 방법을 알아보겠습니다.
저도 처음에 어떡해 바꿔야 할지 막막했습니다. 이렇게 바꿔보고 저렇게 바꿔보고 구글링도 열심히 해보았습니다.결국엔 구글링으로 알아냈습니다. 역시 대단한 구굴신입니다. ^^ 구글신을 통해 알게되었는데요. 생각보다 간단하더군요.ㅎㅎ
html
<html>
<head>
</head>
<body>
<input type="radio" id="radio1" name="radios"> <label for="radio1">바나나</label>
위에 기제된 인풋 html 코드를 삽입 하여라디오 버튼을 만들어 줍시다.
</body>
</html>
css
/* rario button */
/* 라디오 버튼 숨기기 (원형 디스크) 푸시 버튼 효과를 생성하기 위해 레이블을 사용합니다.*/
input[type=radio] { display:none; margin:10px; }
/* 레이블 (radiobuttons에 인접한)의 look'n'feel을 변경하시면 됩니다.
레이블에 여백을 추가하고 패딩을 추가해 주면 됩니다.*/
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 8px 19px;
background-color: #f5f5f5;
border: 1px solid #ccc;
font-size: 13px !important;
width: 110px;
text-align: center;
}
/* 선택한 라디오 단추 옆의 레이블에 대한 배경색 변경하면 됩니다. 강조 표시된 버튼으로 보이게합니다.*/
input[type=radio]:radio + label {
background-image: none;
background-color:#3598dc;
color:#fff;
}
이 방식으로 체크박스도 동일하게 바꿀 수 있습니다.^^
input[type=radio]:radio
radio 라고 써있는 곳을 check로 바꾸어 주면 됩니다.
그러면 체크박스도 동일하게 적용될것입니다.
버튼 디자인은 자신의 입맛에 맞게
css 를 수정해주시면 됩니다.
'IT' 카테고리의 다른 글
| 간단한 CSS로 구현하는 타임 라인 (0) | 2017.03.08 |
|---|---|
| 디자인에 사용할 CSS 여러가지 (0) | 2017.03.07 |
| jQuery와 CSS3에서 손쉽게 구현할 수있는 스크롤 효과 (0) | 2017.03.07 |
| CSS 스프라이트와 steps를 사용하여 애니메이션 이미지를 만들자 (0) | 2017.03.07 |
| CSS Shapes에서 텍스트가 이미지를 감싸도록 레이아웃을 표현 (0) | 2017.03.07 |
댓글