CSS自學框架之表單

首先我們看一下表單樣式，下面共有5張截圖
表單樣式，組合
表單樣式—數字、顏色選擇、單文件選擇、多文件選擇、滾動條、進度條樣式
表單樣式—日期選擇器
表單樣式—多選框、單選框、下拉框
表單樣式—文本、多行文本、只讀文本

一、CSS代碼

/*表單*/fieldset{border: none;margin-bottom: 2em;}fieldset > *{ margin-bottom: 1em }fieldset:last-child{ margin-bottom: 0 }fieldset legend{ margin: 0 0 1em }/* legend標簽是CSS中用于定義各種列表樣式的重要標簽之一 */fieldset input:not([type="checkbox"]):not([type="radio"]), fieldset select, fieldset textarea{ width: 100% }fieldset label{display: block; user-select: none;}fieldset label > span:first-child{opacity: .6;white-space: nowrap;margin-bottom: .5rem;display: inline-block;}/* :required 選擇器在表單元素是必填項時設置指定樣式。 */fieldset label.required > span:first-child:after{color: red;content: "*";margin-left: .25em;}input[disabled], textarea[disabled]{cursor: no-drop !important;}input, select, textarea{margin: 0;outline: none;font: inherit;max-width: 100%;background: none;vertical-align: middle;}input[disabled], textarea[disabled]{cursor: no-drop !important;}input[type*="date"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"],select, textarea{padding: .5em;color: inherit;border-radius: var(--radius);border: var(--border-width) var(--gray) solid;}input.invalid, input:out-of-range{border-color: #c40b00;background: rgba(255, 0, 0, .1);}/* 文件選擇 */input[type="file"]:not([hidden]){display: flex;align-items: center;}			input[type="file"]::-webkit-file-upload-button{color: #fff;border: none;outline: none;padding: .5em 1em;font-size: inherit;margin-right: .5em;display: inline-block;border-radius: var(--radius);background-color: var(--primary);}/* 顏色選擇器 */input[type="color"]{width: 3em !important;height: 3em !important;border: none;padding: 0;}input[type="color"]::-webkit-color-swatch-wrapper{padding: 0;}input[type="color"]::-moz-color-swatch{border: none;}input[type="color"]::-webkit-color-swatch{border: none;border-radius: var(--radius);}/* 滑動條 */input[type="range"]{margin: 0;height: 100%;-webkit-appearance: none;-moz-appearance: none;cursor: ew-resize;cursor: grab;overflow: hidden;min-height: 1.5rem;}			input[type="range"]:focus{outline: none;box-shadow: none;}			input[type="range"]:active::-webkit-slider-thumb{border-color: var(--primary);background-color: var(--primary);}input[type="range"]:active::-moz-range-thumb{border-color: var(--primary);background-color: var(--primary);}		input[type="range"]:focus::-ms-thumb{border-color: var(--primary); background-color: var(--primary);}			input[type="range"]::-moz-focus-outer{ border: 0 }input[type="range"]::-webkit-slider-runnable-track{content: '';height: calc(var(--border-width) * 2);pointer-events: none;background-color: var(--primary);}			input[type="range"]::-webkit-slider-thumb{width: 1em;height: 1em;-webkit-appearance: none;appearance: none;background: #fff;border-radius: 5em;margin-top: calc(-.5em + var(--border-width));border: var(--border-width) solid rgba(0, 0, 0, .15);transition: .3s border-color, .3s background-color;}			input[type="range"]::-moz-range-track{height: 2px;background: rgba(0, 50, 126, .12);}			input[type="range"]::-moz-range-thumb{width: 1em;height: 1em;background: #fff;border-radius: 5em;margin-top: calc(-.5em + var(--border-width));border: var(--border-width) solid rgba(0, 0, 0, .15);transition: .3s border-color, .3s background-color;}		input[type="range"]::-moz-range-progress{border: 0;height: 2px;margin-top: 0;background-color: var(--primary);}				/* 進度條 */progress{overflow: auto;border-radius: 50px;}			progress::-webkit-progress-bar{background-color: #eee;}/* 多選框 */input[type="checkbox"], input[type="radio"]{float: left;width: 1.5em;height: 1.5em;cursor: pointer;position: relative;margin: 0 .5em 0 0;-moz-appearance: none;-webkit-appearance: none;}			input[type="checkbox"]:before, input[type="radio"]:before{content: '';width: 100%;height: 100%;display: block;box-shadow: 0 0 0 var(--border-width) var(--gray) inset;transition: background-color .3s, box-shadow .3s;}			input[type="checkbox"]:after{top: 10%;left: 10%;width: 30%; height: 60%;content: '';position: absolute;transition: transform .3s;transform-origin: 100% 100%;border-right: .15em solid #fff;border-bottom: .15em solid #fff;transform: rotate(45deg) scale(0);}input[type="radio"], input[type="radio"]:before{ border-radius: 100% }input[type="checkbox"], input[type="checkbox"]:before{ border-radius: .2em }			input[type="radio"]:checked:before{background-color: var(--primary);border: var(--border-width) solid var(--primary);box-shadow: 0 0 0 .2em #fff inset;}			input[type="checkbox"]:checked:before{box-shadow: none;background-color: var(--primary);}			input[type="checkbox"]:checked:after{transform: rotate(45deg) scale(1);}/* -- 開關按鈕 */input[type="checkbox"].switch{width: 4em;height: 2em;float: none;cursor: pointer;position: relative;box-sizing: content-box;border-radius: calc(var(--radius) * 10);border: var(--border-width) solid var(--gray);background-color: var(--lighter-gray);transition: border .3s, background-color .3s;}			input[type="checkbox"].switch:before{margin: 0;border: 0;width: 2em;height: 2em;content: '';display: block;box-shadow: none;background: #fff;position: absolute;transition: transform .3s;border-radius: calc(var(--radius) * 10);}			input[type="checkbox"].switch:after{ content: normal }			input[type="checkbox"].switch:checked{box-shadow: none;border-color: var(--primary);background-color: var(--primary);}input.switch:checked:before{background: #fff;transform: translateX(2em);}/* 一行表單 */form .inline label, fieldset.inline label{display: inline-block;vertical-align: bottom;margin: 0 .75em .75em 0;}</style><meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>

二、html代碼

<div class="mythBox mid"><fieldset><label class="required"><span>單行文本框：</span><input type="text" value="我的愛好廣泛" /></label><label><span>禁用的文本框：</span><input type="text" value="我的年齡" disabled=""></label><label><span>只讀的文本框：</span><input type="text" value="我是只讀的" readonly=""></label><label><span>多行文本框：</span><textarea>假如生活欺騙了你，不要悲傷，不要心急！憂郁的日子里須要鎮靜：相信吧，快樂的日子將會來臨！心兒永遠向往著未來；現在卻常是憂郁：一切都是瞬息，一切都將會過去；而那過去了的，就會成為親切的懷戀。</textarea></label><label><span>數字：</span><input type="number" value="5678" /></label><label><span>超出數字的文本框：</span><input type="number" min="1" max="100" value="101"></label><label><span>選擇顏色：</span><input type="color"></label><label><span>單文件：</span><input type="file"></label><label><span>上傳多文件：</span><input type="file" multiple=""></label><label><span>滑動條：</span><input type="range"></label><label><span>進度條：</span><progress value="10" max="50"></progress></label><label><span>日期形文本框：</span><input type="date"></label><label><span>日期 + 時間形文本框：</span><input type="datetime-local"></label><label><input type="checkbox">多選選項</label><label><span>性別：</span><span style="display:inline-block;"><input type="radio" name="xingbie" value=0"">女</span><span style="display:inline-block;"><input type="radio" name="xingbie" value="1">男</span></label><label><span>下來單選框：</span><select><option>張三</option><option>李四</option><option>王五</option></select></label><label><span>下來多選框：</span><select multiple><option>張三</option><option>李四</option><option>王五</option></select></label><label><span>開關按鈕：</span><input type="checkbox" class="switch"></label></fieldset>	  <br/><br/><form><fieldset><legend>多行：</legend><label><input type="checkbox" />多選選項 1</label><label><input type="checkbox" />多選選項 2</label><label><input type="checkbox" />多選選項 3</label></fieldset><fieldset class="inline"><legend>單行：</legend><label><input type="radio" name="radio" />單選選項 1</label><label><input type="radio" name="radio" />單選選項 2</label><label><input type="radio" name="radio" />單選選項 3</label></fieldset><fieldset><legend>混搭：</legend><div class="row"><div class="col-4"><label><input type="text" placeholder="名字：" /></label></div><div class="col-4"><label><input type="text" placeholder="郵箱：" /></label></div><div class="col-4"><label><input type="text" placeholder="網站：" /></label></div><div class="col-12"><label><textarea placeholder="在這里留言吧"></textarea></label></div><div class="col-12"><button class="btn yellow" type="submit">提交</button></div></div></fieldset></form></div>

這一小節里，我學習了一些表單元素的樣式定，收貨頗豐，主要實現了單行文本框輸入、多行文本框、數字輸入框、開關、單選框、多選框、下拉框、進度條、互動條等一些列表單元素的css樣式。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/38914.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/38914.shtml
英文地址，請注明出處：http://en.pswp.cn/news/38914.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

IOS開發-XCode14介紹與入門

IOS開發-XCode14介紹與入門

IOS開發-XCode14介紹與入門 1. XCODE14的小吐槽2. XCODE的功能bar一覽3. XCODE項目配置一覽4. XCODE更改DEBUG/RELEASE模式5. XCODE單元測試 1. XCODE14的小吐槽 iOS開發工具一直有個毛病&#xff0c;就是新版本的開發工具的總會有一些奇奇怪怪的bug。比如在我的Mac-Pro&#…
閱讀更多...
Springboot 實踐（3）配置DataSource及創建數據庫

Springboot 實踐（3）配置DataSource及創建數據庫

前文講述了利用MyEclipse2019開發工具&#xff0c;創建maven工程、加載springboot、swagger-ui功能。本文講述創建數據庫&#xff0c;為項目配置數據源&#xff0c;實現數據的增刪改查服務&#xff0c;并通過swagger-ui界面舉例調試服務控制器 創建數據庫 項目使用MySQL 8.0.…
閱讀更多...
vue基礎知識四：Vue實例掛載的過程

vue基礎知識四：Vue實例掛載的過程

一、思考 我們都聽過知其然知其所以然這句話 那么不知道大家是否思考過new Vue()這個過程中究竟做了些什么&#xff1f; 過程中是如何完成數據的綁定&#xff0c;又是如何將數據渲染到視圖的等等 一、分析 首先找到vue的構造函數 源碼位置&#xff1a;src\core\instance\…
閱讀更多...
一生一芯4——使用星火應用商店在ubuntu下載QQ、微信、百度網盤

一生一芯4——使用星火應用商店在ubuntu下載QQ、微信、百度網盤

星火應用商店可以非常方便的完成一些應用的下載&#xff0c;下面是官方網址 http://spark-app.store/download 我使用的是intel處理器&#xff0c;無需下載依賴項&#xff0c;直接點擊軟件本體 我這里下載amd64,根據自己的處理器下載對應版本 sudo apt install ./spark-stor…
閱讀更多...
做視頻_Style

做視頻_Style

Video 1> 風格2> 技巧3> 借鑒 &#x1f517; B站視頻 1> 風格 記錄分享生活&#xff0c;工作&#xff0c;學習方面的總結&#xff1b; 4個段位&#xff1a; 實用 -> 簡潔 -> 清晰流暢 -> 生動有趣 2> 技巧 1> 大視頻分段錄制&#xff0c;最后合并…
閱讀更多...
pytorch入門-神經網絡

pytorch入門-神經網絡

神經網絡的基本骨架 import torch from torch import nn #nn模塊是PyTorch中用于構建神經網絡模型的核心模塊。它提供了各種類和函數&#xff0c;可以幫助你定義和訓練神經網絡。class Tudui(nn.Module):def __init__(self):super(Tudui, self).__init__() #調用 super(Tudui,…
閱讀更多...
數據結構入門指南：二叉樹

數據結構入門指南：二叉樹

目錄 文章目錄 前言 1. 樹的概念及結構 1.1 樹的概念 1.2 樹的基礎概念 1.3 樹的表示 1.4 樹的應用 2. 二叉樹 2.1 二叉樹的概念 2.2 二叉樹的遍歷 前言 在計算機科學中&#xff0c;數據結構是解決問題的關鍵。而二叉樹作為最基本、最常用的數據結構之一&#xff0c;不僅在算法…
閱讀更多...
java對大文件分片上傳

java對大文件分片上傳

這里記錄一下&#xff0c;Java對大文件的切分&#xff0c;和后端接口分片上傳的實現邏輯 正常&#xff0c;前后端分離的項目其實是前端去切分文件&#xff0c;后端接口接收到切分后的分片文件去合并&#xff0c;這里都用java來記錄一下。特別說明&#xff1a;我這里用的是zip包…
閱讀更多...
vue+java實現在線播放mp4視頻

vue+java實現在線播放mp4視頻

java: 讀取本地視頻文件的流然后給response的輸出流 File file new File("/Users/zhangqingtian/Documents/水庫/Floodforecast/static/" videoName);BufferedInputStream inputStream new BufferedInputStream(new FileInputStream(file));response.setContentT…
閱讀更多...
ReactDOM模塊react-dom/client沒有默認導出報錯解決辦法

ReactDOM模塊react-dom/client沒有默認導出報錯解決辦法

import ReactDOM 模塊“"E:/Dpandata/Shbank/rt-pro/node_modules/.pnpm/registry.npmmirror.comtypesreact-dom18.2.7/node_modules/types/react-dom/client"”沒有默認導出。 解決辦法 只需要在tsconfig.json里面添加配置 "esModuleInterop": true 即…
閱讀更多...
【C++】queue容器

【C++】queue容器

1.queue容器基本概念 2.queue常用接口 #include <iostream> using namespace std;//隊列queue #include<queue>//創建Person類 class Person { public:Person(string name, int age){this->m_Name name;this->m_Age age;}string m_Name; //姓名int m_Age; …
閱讀更多...
mysql創建新用戶并授權

mysql創建新用戶并授權

目錄 前言登錄到mysql創建用戶用戶授權更改用戶密碼參考 前言 略 登錄到mysql shell> mysql -h127.0.0.1 -P3306 -uroot -p******創建用戶 mysql> CREATE USER abc% IDENTIFIED BY 123456;用戶授權 mysql> GRANT all privileges ON ruoyi.* TO abc%;用戶ruoyi擁有…
閱讀更多...
優維低代碼實踐：自定義模板

優維低代碼實踐：自定義模板

優維低代碼技術專欄&#xff0c;是一個全新的、技術為主的專欄&#xff0c;由優維技術委員會成員執筆&#xff0c;基于優維7年低代碼技術研發及運維成果&#xff0c;主要介紹低代碼相關的技術原理及架構邏輯&#xff0c;目的是給廣大運維人提供一個技術交流與學習的平臺。 優維…
閱讀更多...
禾賽科技Q2營收交付雙新高，國產激光雷達從量變到質變

禾賽科技Q2營收交付雙新高，國產激光雷達從量變到質變

隨著2022年激光雷達元年、2023年城市智能輔助駕駛&#xff08;NOA&#xff09;元年相繼到來&#xff0c;激光雷達產業迎來爆發期。 今年以來&#xff0c;自動駕駛公司、汽車制造商以及移動出行公司等各路人馬積極推動城市級別的智能輔助駕駛全面落地&#xff0c;北京、上海、深…
閱讀更多...
通過css設置filter 屬性，使整個頁面呈現灰度效果，讓整個網頁變灰

通過css設置filter 屬性，使整個頁面呈現灰度效果，讓整個網頁變灰

通過css設置filter 屬性設置頁面整體置灰 效果圖: 通過設置 filter 屬性為 grayscale(100%)&#xff0c;頁面中的所有元素都會被應用灰色濾鏡效果&#xff0c;使整個頁面呈現灰度效果。 <style type"text/css"> html { filter: grayscale(100%); -webkit-f…
閱讀更多...
git pull 某一個文件或文件夾

git pull 某一個文件或文件夾

QQ: 2967732156 背景&#xff1a; 在使用Oracle VM VirtualBox&#xff0c;進行Linux開發時&#xff0c;隨著使用內存越來越少&#xff0c;空間已不足拉取整個代碼庫。 Ubuntu1604內存夠&#xff0c;Ubuntu18.04內存不夠。 思路&#xff1a; 第一步&#xff1a;從問題本身…
閱讀更多...
TB/TM-商品詳情原數據（APP)

TB/TM-商品詳情原數據（APP)

一、接口參數說明&#xff1a; item_get_app-獲得TB/TMapp商品詳情原數據&#xff0c;點擊更多API調試&#xff0c;請移步注冊API賬號點擊獲取測試key和secret 公共參數 請求地址: https://api-gw.onebound.cn/taobao/item_get_app 名稱類型必須描述keyString是調用key&…
閱讀更多...
考研 408 | 【計算機網絡】 應用層

考研 408 | 【計算機網絡】 應用層

導圖 網絡應用模型 客戶/服務器&#xff08;c/s&#xff09;模型 P2P模型 DNS 域名 域名服務器 域名解析過程 文件傳輸協議FTP FTP服務器和用戶端 FTP工作原理 電子郵件 電子郵件的信息格式 組成結構 郵件服務器的功能&#xff1a; 1.發送&接收郵件 2.給發件人報告郵…
閱讀更多...
使用windows Api簡單驗證ISO9660文件格式，以及裝載和卸載鏡像文件

使用windows Api簡單驗證ISO9660文件格式，以及裝載和卸載鏡像文件

使用IIsoImageManager接口簡單驗證ISO鏡像文件正確性，使用AttachVirtualDisk裝載ISO鏡像文件，和使用DetachVirtualDisk卸載,（只支持windows 8及以上系統） 導讀 IIsoImageManager 驗證ISO文件正確性AttachVirtualDisk 裝載鏡像文件DetachVirtualDisk 卸載鏡像文件其他相關函…
閱讀更多...
《游戲編程模式》學習筆記（四） 觀察者模式 Observer Pattern

《游戲編程模式》學習筆記（四） 觀察者模式 Observer Pattern

定義 觀察者模式定義了對象間的一種一對多的依賴關系&#xff0c;當一個對象的狀態發生改變時&#xff0c;所有依賴于它的對象都得到通知并被自動更新。 這是定義&#xff0c;看不懂就看不懂吧&#xff0c;我接下來舉個例子慢慢說 為什么我們需要觀察者模式 我們看一個很簡…
閱讀更多...
最新文章

Copyright @ 2022~2023