.mui-switch {
width: 52px;
height: 31px;
position: relative;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius: 20px;
display: inline-block;
-webkit-appearance: none;
outline: none; }
.mui-switch:before {
content: '';
width: 29px;
height: 29px;
position: absolute;
top: 0px;
left: 0;
border-radius: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
.mui-switch:checked {
background-color: red; }
.mui-switch:checked:before {
left: 21px; }

<label><input class="mui-switch" type="checkbox" value=""> </label>

input Do a switch button more related articles

  1. Use React And make a simple to-do-list

    1. Preface Speaking of React, I've been trying to understand and read the relevant introductory tutorials since a year ago , And I bought one <React: User interface development framework leading the future  > To read .React The idea of lightweight component and its application virtual ...

  2. react Example of todo, Do a real-time response list operation

    react Example of todo, Do a real-time response list operation Of all the mvc In the frame , The most common example is not hello world, It is todo, because reactjs The simplicity of , Without reference to flux and redux Under the circumstances , We ...

  3. Use plupload Make a similar one qq Email attachment upload effect

    The framework used in company projects is springmvc+hibernate+spring, Now we need to make a similar qq Email attachment upload function , Just upload a small type of attachment for the time being Both processes and solutions need to add attachments , Both processes and solutions can be ...

  4. jsPlumb Plug in to do an imitation viso Draggable flow chart of

    Preface This is my first time to write a blog , I'm still a little excited ! This time, the main thing to share is to use jsPlumb, Make a flow chart that allows users to customize drag and drop , And it can be serialized and stored on the server . I did a rough job in this implementation , And share what I'm doing j ...

  5. use Socket Make a LAN chat tool ( turn )

    original text :http://www.cnblogs.com/technology/archive/2010/08/15/1799858.html Program design becomes a simple communication between server and client , But there are ways to ...

  6. HDU-2500 Be a healthy Hangdian person

    http://acm.hdu.edu.cn/showproblem.php?pid=2500 Be a healthy Hangdian person Time Limit: 1000/1000 MS (Java/Others)    M ...

  7. Be a healthy Hangdian person --hdu2500

    Be a healthy Hangdian person Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  8. utilize jquery+iframe Make one ajax Upload effect

    The following is self-study it network -- Intermediate class notes website :www.zixue.it html page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  9. Windows Phone Development (21): Make a simple drawing board

    original text :Windows Phone Development (21): Make a simple drawing board In fact, what we are going to talk about today is a control --InkPresenter, This control is not very powerful , There's no way to talk to WPF Medium InkCanvas comparison , It is estimated to be true ...

Random recommendation

  1. Redis 3.2 Linux Environment cluster construction and java operation

    redis use redis-3.2.4 edition . setup script 1. Download and unzip cd /usr/local wget http://download.redis.io/releases/redis-3. ...

  2. 【 turn 】mysql Trigger realizes data synchronization of two tables

    mysql The synchronization of two tables is realized by trigger   at present , Local test success .  Suppose two local databases a and b,a Here's the table table1(id, val) b Here's the table table2(id, val)  Suppose you want to be table1 Data is more ...

  3. python The road to automation day 05

    Content catalog : List generator . iterator & generator Decorator Software directory structure specification Module initial Common modules 1. List generator , iterator & generator List generator demand : list [0, 1, 2, 3, 4, 5, 6, ...

  4. Fedora21 Source configuration and graphics card installation

    1. install fastestmirror Fedora The source speed is very slow , It's very annoying , But it has an automatic selection of the fastest source package . yum install yum-fastestmirror yum-presto It will judge you ...

  5. mysql explain Command interpretation

    Reprint http://bzyyc.happy.blog.163.com/blog/static/6143064720115102551554/ key real The index used . If NULL, No index is used . Very few ...

  6. About Python Read and write files in and interact with users

    One . Know something in advance stay python It can read and write files in the same way as other languages , It is worth noting that ,Python There are several ways to open a file for reading in , They are as follows : f = open('username.txt') ...

  7. Excel Set of functions ( Used )

    1.   SUBTOTAL function   The results of the screening are summed up SUBTOTAL( Function number , Area ) Function number   by 1 To 11( Contains hidden values ) or 101 To 111( Ignore hidden values ) Number between , Specify which function to use in the data list ...

  8. postman Add permission validation

    Basic Auth Enter your username and password , Click on  Update Request  Generate authorization header An authentication   classification : postman Learning notes

  9. Discrete Mathematics : use C Language is used to judge the binary relationship of set existence

    use C Language to judge whether to satisfy reflexivity , Reflexion , irreflexive , symmetry , antisymmetric , Asymmetry and transitivity I don't know if it's right . There's not a lot of validation , But there is nothing wrong with some casual relationship tests , If it's wrong , Welcome to leave a message #include<bit ...

  10. SQL Export to Excel stored procedure

    if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[p_exporttb]') and OBJECTPROPER ...