CSS 實現iphone 樣式開關

阿新 • • 發佈：2019-01-20

極客標籤上看到的挺有意思的小demo，用純css實現（hh，動畫能用html+css就不用js)

效果圖：

程式碼：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <title>聊天</title>  
    <link rel="stylesheet" href="">    
</head>  
<style type="text/css" media="screen">  
		.back{
			width:50px;
			height:25px;
			background-color: #ddd;
			border-radius: 15px;
			display: block;
			/*1.display: block;很重要，因為用來做背景的label是沒有內容的*/
			cursor: pointer;
			position: relative;
			/*2.父元素用relative，子元素用absolute，使子元素相對父元素定位*/
			transition: all 0.3s ease;
			/*背景變綠的特效*/
		}
		.back:after{
			content:'';
			/*3.除了有content還要有display，不然這個偽類不會出現*/
			display:block;
			width: 25px;
			height: 25px;
			border-radius: 100%;
			background-color: #ffffff;
			box-shadow: 1px 1px 1px black;
			position: absolute;
			top:-1px;
			transition: all 0.3s ease;
		}
		.back:active:after{
			transform: scale(2,0.8);
		}
		.blx:checked~label{
			background-color: #42d842;
			/*4.~代表之後的所有同級指定元素(這裡是label)，不一定要挨著但一定要有相同父元素*/
		}
		.blx:checked~label:after{
			left:25px;
		}
		.hidden{
			display: none;
		}

		.blx:disabled~label{
			background-color: #d5d5d5;
			pointer-events: none;
		}
		.blx:disabled~label:after{
			background-color: #bcbdbc;
		}
		.slidep{
			margin: 20px;
		}
</style>  
  
<body>  
    <div class="slidep">
    	<input type="checkbox" id="uncheckbox" class="blx hidden"/>
    	<label for="uncheckbox" class="back"></label>
    </div>
    <div class="slidep">
    	<input type="checkbox" id="discheckbox" class="blx hidden" disabled />
    	<label for="discheckbox" class="back"></label>
    </div>
    <div class="slidep">
    	<input type="checkbox" id="checkedbox" class="blx hidden" checked />
    	<label for="checkedbox" class="back"></label>
    </div>
</body>  
  
</html>

CSS 實現iphone 樣式開關

極客標籤上看到的挺有意思的小demo，用純css實現（hh，動畫能用html+css就不用js)效果圖：程式碼：<!DOCTYPE html> <html> <he

css實現線條樣式（中間高亮，兩邊透明）

div height round width eight style near 中間樣式 .line{ width: 100%; height: 2px; background: linear-gradient( to

Css實現radio樣式自定義

實現思路 1.設定input 屬性hidden對該input進行隱藏，或者通過display:none也可以 <input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>

css實現右尖括號樣式

height light right 分享 pre pos wid orm css .arrow{ width: 6px; height: 6px; border-top: 1px solid #999; border-right: 1px solid #

CSS內嵌樣式實現打字效果

con pac hidden color 樣式 border anim ace font <style> *{margin:0;padding:0;} @keyframes typing { from { width: 0; } } @keyframes

css實現修改默認滾動條樣式

dtd pointer inter rgb back rbo trac 整體 rgba <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>

css實現修改預設滾動條樣式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>scroll </title> <style>

(S)CSS中實現主題樣式的4½種方式 [譯]

原Slides: 4½ Methods for Theming in (S)CSS ; 作者: Harry Roberts PM說要實現一個一鍵設定主題的功能，作為技術，你能想到的實現方式有哪些呢？ 1. 什麼是主題樣式？相信大家對網頁的主題樣式功能肯定不陌生。對於一些站點，在基礎樣式上，開

CSS實現播放暫停按鈕樣式

播放按鈕常見形式為三角形，CSS繪製三角形主要用到了border-width屬性，他可以定義四個邊框各個的寬度。播放樣式程式碼： button{ padding: 0; background-color: white; box-

純 css 實現 PC 端無滾動條滾動樣式分享

由於接觸過各種後臺管理平臺開發，我們的開發介面一般左側導航欄，右側內容區域。在左側呢一旦超出高度在不同的瀏覽器就會顯示滾動條。嚴重影響頁面美觀。在這裡呢主要是講的css實現 PC 端無滾動條滾動樣式。下面直接上程式碼：html：<div class="box-wrapp

css實現開關，js處理對應事件

1、js中在指定位置動態建立開關的html $html.find("#id").before($('<div class="switch">' +'<input class="switch-checkbox" id="onoffswitch" type="che

純css實現仿ios的switch開關

效果圖如下：很簡單的HTML結構  <label for=""><input type="checkb

CSS實現最後一個li樣式不一樣

#news .newsmore{ display:block; margin-top: 0; cursor: pointer; border-bottom:1px solid #E0E0E0;

CSS 實現自定義樣式的單選框與多選框

前端在開發的過程中，經常會遇見使用單選框以及多選框的情況，但是預設的選框按鈕的樣式單一，一般我們需要去自定義一些選框按鈕的樣式；通常情況下，單選、多選為方便自定義樣式，一般會採用input+

Css實現checkbox及radio樣式自定義

前言 checkbox和radio樣式自定義在網頁中是很常見的，比如在進行表單輸入時性別的選擇，使用者註冊時選擇已閱讀使用者協議。隨著使用者對產品體驗要求越來越高，我們都會對checkbox和radio重新設計，checkbox預設的樣式非常醜，無法直接修改checkbox和radio的樣式，這裡我們藉助