2. 程式人生 > >css：預設的checkbox、input、radio太醜了？手把手教你改變使用純css3改寫的帶動畫的預設樣式

css：預設的checkbox、input、radio太醜了？手把手教你改變使用純css3改寫的帶動畫的預設樣式

阿新 • • 發佈：2018-12-30

專案的github地址為： https://github.com/sunshine940326/css3formeledemo
本文首發於我的個人部落格，http://cherryblog.site/ ；歡迎大家檢視我的其他部落格
最近在做公司後臺的優化專案，拿到設計稿一看，設計師覺得預設的input、checkbox、radio太醜了，要優化，在做了幾個demo之後找到了要怎麼優化這些樣式的方法，我優化的原則有以下幾點：

  • 因為是在已有的專案上做優化，所以儘量在不改變原有結構的基礎上進行修改
  • input、checkbox這些大都是表單裡面的元素，所以大部分跟後臺有互動，保留原有屬性，只增加新的class或者id
  • 只使用css3，並且其屬性也都是input，當然也可以直接使用img代替，或者用div+span模擬，但是這就不叫做“優化”，而是模仿了。
  • 使用sass，只需要改變引數就可以反覆多次使用

思路

大致的原理都是使用html原生的標籤元素標籤checkbox或者input，在後面加上label標籤，將一些原有的元素隱藏，然後再用css設定你想要樣式，行為方面都是根據原生屬性來判斷，不需要使用js。所有的html程式碼都是

div.container
    input type="checkbox" id="checkbox" 
    label for="checkbox"
    div
 
.bottom-line

都是利用css的原生屬性來判斷使用者的操作,先將原本的checkbox隱藏，然後再設定label的樣式，最後設定input[type=checkbox]:checked+label的樣式

checkbox

checkbox demo1

首先來看一個checkbox，實現這個動畫其實很簡單，只運用css就可以實現。實現的原理是繫結checkout和label,用label控制是否checked。點選label的時候改變checkbox的屬性
先將checkbox隱藏，然後label為一個只有border的框框，使用after和befor偽元素來實現對號的兩部分。
先將after和before設定寬度為width*0.4，height為0，設定不同的旋轉角度，讓befor和after合起來剛好是一個對號。
然後用css動畫設定使其height達到width*0.7和width*0.35並控制動畫使其連貫播放，

html

<div class="cb-container">
    <input type="checkbox" id="checkbox">
    <label for="checkbox" class="cb-label"></label>
</div>

scss


$checked-color: #fff;
$checked-bg:rgb(101,141,181);
$unchecked-color: #cfcece;
$unchecked-bg:rgb(249,249,249);
$checkbox-height: 100px;
$background-color:#fff;
$font-color:#dcdcdc;
$duration: .4s;
.cb-container{
  width: 1000px;
  text-align: center;
  margin-top: 50px;
}

html, body{
  padding:0;
  margin:0;
  background-color: $background-color;
  color:$font-color;
  font-family:'Open Sans';
}
#checkbox{
  display:none;
}

.cb-label{
  height: $checkbox-height;
  width: $checkbox-height;
  background: $unchecked-bg;
  border: $checkbox-height * .1 solid $unchecked-color;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  transition: border-color ease $duration/2;
  -moz-transition: border-color ease $duration/2;
  -o-transition: border-color ease $duration/2;
  -webkit-transition: border-color ease $duration/2;
  cursor: pointer;
  &::before,&::after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: $checkbox-height * 0.2;
    background: $checked-color;
    display: inline-block;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    content: '';
    -webkit-transition: opacity ease 0.5s;
    -moz-transition: opacity ease 0.5s;
    transition: opacity ease 0.5s;
  }
  &::before{
    top:$checkbox-height * 0.76;
    left: $checkbox-height * 0.31;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  &::after {
    top: $checkbox-height * .45;
    left: $checkbox-height * 0;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
input[type=checkbox]:checked + .cb-label,
.cb-label.checked{

  background: $checked-bg;
  border-color:$checked-bg;
  &::after{
    border-color:$checked-color;
    height: $checkbox-height * .35;
    -moz-animation: dothabottomcheck $duration/2 ease 0s forwards;
    -o-animation: dothabottomcheck $duration/2 ease 0s forwards;
    -webkit-animation: dothabottomcheck $duration/2 ease 0s forwards;
    animation: dothabottomcheck $duration/2 ease 0s forwards;
  }

  &::before{
    border-color:$checked-color;
    height: $checkbox-height * 1;
    -moz-animation: dothatopcheck $duration ease 0s forwards;
    -o-animation: dothatopcheck $duration ease 0s forwards;
    -webkit-animation: dothatopcheck $duration ease 0s forwards;
    animation: dothatopcheck $duration ease 0s forwards;
  }

}
@-moz-keyframes dothabottomcheck{
  0% { height: 0; }
  100% { height: $checkbox-height *0.35; }
}

@-webkit-keyframes dothabottomcheck{
  0% { height: 0; }
  100% { height: $checkbox-height *0.35; }
}

@keyframes dothabottomcheck{
  0% { height: 0; }
  100% { height: $checkbox-height *0.35;  }
}

@keyframes dothatopcheck{
  0% { height: 0; }
  50% { height: 0; }
  100% { height: $checkbox-height * 0.7; }
}
@-webkit-keyframes dothatopcheck{
  0% { height: 0; }
  50% { height: 0; }
  100% { height: $checkbox-height * 0.7; }
}
@-moz-keyframes dothatopcheck{
  0% { height: 0; }
  50% { height: 0; }
  100% { height: $checkbox-height * 0.7; }
}

經過改變後的checkbox

checkboxdemo2

checkboxdemo2

checkboxdemo3

checkboxdemo3

checkboxdemo4

checkboxdemo4

input

input的優化源於在掘金上看到的一篇文章，效果著實小清新，於是就使用拿來主義，寫了一個簡易版的demo，效果如下，運用的是flex佈局還有偽元素placeholder來實現的。
input效果

  • 輸入框清除預設樣式
  • 當輸入框獲得焦點時，輸入框原本的文字向上移，並且下方藍色的線寬度由0變為100
  • 如果沒有輸入內容，還變為未輸入的狀態
    先貼上程式碼

html程式碼

html結構很簡單，使用的是HTML原生的form元素input和label；在效果中的“請輸入內容”這幾個字不是使用的placeholder，而是使用的label，但是也設定有placeholder,只不過是把placeholder的透明度設定為0，因為我們需要根據placeholder是否顯示來設定下方line的寬度和label的位置。

div.input-container
    input type="input" id="input" placeholder="請輸入內容"
    label for="input"
    div.bottom-line

完整html程式碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="scss/main.css">
</head>
<body>
<div class="input-container">
    <input type="input" id="input" placeholder="請輸入內容">
    <label for="input">請輸入內容</label>
    <div class="bottom-line"></div>
</div>
</body>
</html>

css程式碼

全部的動畫效果都只使用了css，但是使用的一些新特性瀏覽器相容性還沒有那麼好，相容到ie10.佈局使用的是flex，動畫效果用的是用的transform。運用偽類placeholder判斷是否輸入了文字，如果輸入了文字下方的line寬度變為100%；label中的文字上移並且變小
程式碼如下:

$width: 500px;
$label-font-color: #3f4f5b;
$label-focus-font-color: rgb(82, 97, 108);
$border-bottom-color: #d5d5d5;
$focus-border-color: rgb(101, 141, 181);
$transform-top: 10px;
$transform-time: 0.3s;
$scale: 0.9;

.input-container {
  width: $width;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-flow: column-reverse;
  flex-flow: column-reverse;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin: 100px auto
}

.input-container input {
  -webkit-box-ordinal-group: 11;
  order: 10;
  -ms-flex-order: 10;
  outline: none;
  border: none;
  width: 100%;
  padding: 10px 0;
  font-size: 20px;
  border-bottom: 1px solid $border-bottom-color;
  text-indent: 10px;
}

.input-container input::-moz-placeholder {
  opacity: 0;
}

.input-container input::-webkit-input-placeholder {
  opacity: 0;
}

.input-container input:-ms-input-placeholder {
  opacity: 0;
}

.input-container input, .input-container label {
  transition: all $transform-time;
}

.input-container label {
  -webkit-box-ordinal-group: 101;
  -ms-flex-order: 100;
  order: 100;
  color: $label-font-color;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: translate(10px, 40px);
  transform: translate(0px, 40px);
}

.input-container .bottom-line {
  order: 2;
  width: 0;
  height: 2px;
  background: $focus-border-color;
  transition: all $transform-time;
}

.input-container input:focus {
  border-bottom-color: #fff;
}

.input-container input:focus ~ div, .input-container input:not(:placeholder-shown) ~ div {
  width: 100%
}

.input-container input:focus + label, .input-container input:not(:placeholder-shown) + label {
  color: $label-focus-font-color;
  -webkit-transform: translate(10px) scale($scale);
  transform: translate(10px) scale($scale)
}

相關推薦

css：預設的checkbox、input、radio太醜了？手把手教你改變使用純css3改寫的帶動畫的預設樣式

專案的github地址為： https://github.com/sunshine940326/css3formeledemo 本文首發於我的個人部落格，http://cherryblog.site/ ；歡迎大家檢視我的其他部落格 最近在

Html：實現checkbox全選、非全選、單選

                    Html：實現checkbox全選、非全選、單選   全域性選擇與單選有以下兩點關係： 1、當我把所有單選都選擇上的時候，全選應該是被

css：選擇器（標籤、類、ID、萬用字元）

1、css概述 主要的使用場景就是美化網頁，佈局頁面 （1）html的侷限性 它只關注內容的語義，只能做一些簡單的樣式，並且非常的臃腫和繁瑣 （2）css對網頁美化的作用 css是層疊樣式表的簡稱，它和html是一樣的，都是一種標記語言，css主要用於設定html頁面的文字內容（字型、大小、對齊方式等）圖片的

一站式手把手教你學習Sublime Text 3（插件安裝、html/css速寫、輸入法不跟隨光標）

Sublime Text 3 插件安裝 html/css速寫 輸入法不跟隨光標 Sublime Text 是一款流行的代碼編輯器軟件，也是HTML和散文先進的文本編輯器，可運行在Linux，Windows和Mac OS X。也是許多程序員喜歡使用的一款文本編輯器軟件。下面就重點介紹一下Subl

小程式學習之旅----表單元件 button checkbox form input label radio slider switch textarea 獲取表單資料

<view class='input'> <input placeholder="請輸入內容1" confirm-type="done" type='text' focus="true" bindinput='doInput'/> </view> <

day1 -- Python變數、註釋、格式化輸出字串、input、if、while、for

1.python變數 　　不需要宣告型別，直接 變數名 = 變數值，如 ： name = "hahaha" 2.註釋： 　　單行註釋，前面加 #，如  # print(info)  　　多行註釋，用三組單引號或者三組雙引號包圍起來，如   '

傻瓜教程：手把手教你解決多個應用例項（附程式碼、手繪圖）

// Reminder: this is pseudocode, no bother with "const&", "std::" or others// forgive me C++ fellowstemplate <typename BlaBla>class BST{public:  

bs（二）表單（按鈕、input、圖片圖示）

水平表單 form-horizontal類 內聯表格 form-inline lable會換行顯示，在div新增form-group，則不換行 form-control讓控制元件在各種表單風格中樣式

Android效能優化：手把手教你如何讓App更快、更穩、更省（含記憶體、佈局優化等）

前言 在 Android開發中，效能優化策略十分重要 因為其決定了應

【AI實戰】手把手教你文字識別（檢測篇二：AdvancedEAST、PixelLink方法）

  自然場景下的文字檢測是深度學習的重要應用，在之前的文章中已經介紹過了在簡單場景、複雜場景下的文字檢測方法，包括MSE

U盤重灌系統：手把手教你怎麼使用U盤重灌系統、清除登入密碼

前言 之前講過《不懂電腦也能自己重灌系統，視覺化傻瓜式一鍵重灌系統不求人！！！》，這是針對可以正常開機的情況下直接使用瀏覽器功能重灌系統， 那不能正常開機或者忘記密碼的怎麼辦呢？ 不慌，今天我們就終結這種情況。 PS：沒什麼難點，跟著下面教程走就能重灌成。 製作U盤PE系統 首先我們需要百度搜索&ldquo

建模、紋理、後期，手把手教你制作《向日葵公主》

貼圖 只需要 細節 ges ray cnblogs 效率 3d模型 建模 轉自：http://www.gameres.com/769713.html 《向日葵公主》的這個畫像是一個個人項目，當我看到Gop Gap的概念原畫時，我感覺其十分的神奇，我真的想在3D中做出這個角

手把手教你制作微信小程序，開源、免費、快速搞定

免費 list life 支付 直接 domain -i 方式 poster 最近做了個“羅孚傳車”的小程序 一時興起，做了一個小程序，將個人收集的同汽車相關的行業資訊和學習資料，分享到小程序中，既作為歷史資料保存，又提供給更多的人學習和了解，還能裝一下:) 掃描下方小程序

手把手教你ExtJS從入門到放棄——篇十七(示例14: Ext.js方法詳解之typeOf、isEmpty、isIterable、isFunction、isArray... Iterate）

ExtJS底層就是JS不要想得很難，如果根據需求可以適當看看原始碼，這裡我就不帶著看了 typeOf 返回物件的型別，如下猜猜結果 是string，number哦 isEmpty、isIterable、isFunction、isArray學過JS的這幾個方法就不用多講了 分

手把手教你做一個Java web學生資訊、選課、簽到考勤、成績管理系統附帶完整原始碼及視訊開發教程

四個階段的Java web學生資訊系統視訊教程終於錄製完成了，系統用到的知識點有：jsp+servlet+mysql+jquery+ajax，前端採用的是當下最流行的easyui管理框架，全部採用面向介面的MVC三層設計模式，是大家學習Java web實戰專案不可多得的入門專

阿里大牛手把手教你構建一個高效能、高可用的大型分散式網站

大型分散式網站架構技術 大型網站的特點 大型網站一般有如下特點： 1.使用者多，分佈廣泛 2.大流量，高併發 3.海量資料，服

手把手教你用vue-cli、webpack、vue-router、vue-resource構建單頁應用（SPA）

vue-cli webpack vue-router vue-resource vue-cli:一個官方釋出 vue.js 專案腳手架，使用 vue-cli 可以快速建立 vue 專案 webpack:是當下最熱門的前端資源模組化管理和打包工具。它可以將

【手把手教你全文檢索】Lucene索引的【增、刪、改、查】

前言 　　搞檢索的，應該多少都會了解Lucene一些，它開源而且簡單上手，官方API足夠編寫些小DEMO。並且根據倒排索引，實現快速檢索。本文就簡單的實現增量新增索引，刪除索引，通過關鍵字查詢，以及更新索引等操作。 　　目前博豬使用的不爽的地方就是，讀取檔案內容進行全文檢索時，需要自己編寫讀取過程（這

手把手教你用R實現標記化（附程式碼、學習資料、語料庫）

作者：Rachael Tatman翻譯：樑傅淇本文長度為1600字，建議閱讀4分鐘標記化是自然語

手把手教你如何用法幣（人民幣CNY）在zb購買比特幣BTC、BCH等虛擬幣

最近比特幣等虛擬幣超級火，央視也報道了好多次，也跌了好多，不過對於有些人來說，跌了反而是進場的好機會 好了，今天不談幣市，就教你如何用最簡單的方法購買到比特幣BTC吧 首先，點選連結，註冊ZB網站 第二步，完善自己的一些基本資訊，包括實名認證，這樣方便提幣 第