잠시만 기다려 주세요


  金烏玉兎(금오옥토) - 금 까마귀와 옥토끼란 뜻으로, 해와 달을 가리키는 말. - -  
HOME   |  여기는?   |  바다물때표   |  여러가지 팁 (995)  |  여러가지 추천 (190)  |  자료실 (45)  |  영화 시나리오 (689)  |  드라마 대본 (239)  |  

2018년 11월 16일
몸은 어찌하든 내 자신을 술과 담배로 이끌겠지만.... 내 이성은 그걸 통제할 수 있다는 것을 명심하자. - 바다아이
 

    html/css/xml

html/css/xml - css 전원 스위치 on/off 버튼, toggle switch 버튼, 토글스위치
이 름 : 바다아이   |   조회수 : 56         짧은 주소 : https://www.bada-ie.com/su/?291539700088
1.png - 18 KB   다운수 : 1 회




<!DOCTYPE html>
<html>
<head>
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px; 
}
/*스위치바탕 ie에서 테두리생김방지*/
.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition:.4s;
}
/*스위치버튼 안쪽에 동그란모양*/
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background: white;
  transition: .4s;
}

/*체크된(on된)스위치바탕*/
input:checked + .slider {
  background: #2196F3;
}
/*스위치버튼을 클릭하면 버튼주위에 글로우효과*/
input:focus + .slider {
  box-shadow: 0 0 3px #2196F3;
}
/*스위치버튼을 클릭하면 우측으로 26px이동*/
input:checked + .slider:before {
  transform: translateX(26px);
}

/*Rounded sliders*/
.slider.round {
  border-radius: 34px;
}
/*스위치버튼 안쪽에 동그란모양*/
.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <div class="slider"></div>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <div class="slider round"></div>
</label>

</body>
</html>



출처 : https://m.blog.naver.com/pjh445/220800130429
| |


      1 page / 2 page
번 호 카테고리 제 목 이름 조회수
42 html/css/xml html tab , .... 바다아이 20
현재글 html/css/xml css on/off , toggle switch , 바다아이 57
40 html/css/xml pt, px, em, %, font 바다아이 123
39 html/css/xml (font face) 바다아이 364
38 html/css/xml .... 바다아이 381
37 html/css/xml html MIME ... 바다아이 399
36 html/css/xml ckeditor ajax .... 바다아이 379
35 html/css/xml [] , 바다아이 442
34 html/css/xml , , , ico 바다아이 462
33 html/css/xml input , autocomplete 바다아이 414
32 html/css/xml [CSS] , border-radius, 바다아이 671
31 html/css/xml ckeditor 4 ... 바다아이 875
30 html/css/xml HTTP/2 ? 바다아이 839
29 html/css/xml HTTP/2 ? 바다아이 759
28 html/css/xml xml .... sitemap.xml 바다아이 956
27 html/css/xml ckeditor config.js .... 바다아이 1188
26 html/css/xml 바다아이 1278
25 html/css/xml 바다아이 1092
24 html/css/xml , border 바다아이 1200
23 html/css/xml , 바다아이 1165
22 html/css/xml (= HTML ), entity code 바다아이 1523
21 html/css/xml (Won;) (;Backslash; ) , , 바다아이 1268
20 html/css/xml 바다아이 1136
19 html/css/xml / / 바다아이 1313
18 html/css/xml css3 ... demo . ^^; 바다아이 1121
17 html/css/xml mouse over , Hover Fade Effect using CSS 바다아이 1530
16 html/css/xml [html] TD TR , mouse over 바다아이 1212
15 html/css/xml , (marquee) 바다아이 1426
14 html/css/xml scroll , 바다아이 1298
13 html/css/xml ckeditor , , 바다아이 1934
|






Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Centos + GoLang + PostgreSQL ]
서버위치 : 한국  실행시간 : 0.02068
to webmaster... gogo sea. gogo sea.