【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）
2024-05-09 22:57:09
点击查看效果
代码直接复制就可以用了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"><style>/*蓝色按钮----------------------------------------*/button {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;transition: .618s ease;cursor: pointer;height: 50px;width: 100%;border: 1px solid rgba(51, 100, 237, .35);color: #fff;font-size: 16px;font-weight: bold;border-radius: 3px;background: linear-gradient(180deg, #648CFF 0%, #4172FA 100%);box-shadow: 0 3px 4px 0 rgba(44, 71, 146, .32), inset 0 -2px 0 0 #3262e6;text-align: center;line-height: 46px;user-select: none;} button:hover {opacity: .9;box-shadow: none;} button:focus, button:active {outline: none;background: linear-gradient(180deg, #4d7bff, #154deb);transform: scale(.97);} button[disabled] {color: #fff;background: #b0c7ff;pointer-events: none;cursor: default;box-shadow: none;}/*白色按钮----------------------------------------*/button[white] {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;transition: .618s ease;cursor: pointer;width: 100%;height: 50px;border: none;border-radius: 3px;font-size: 16px;font-weight: bold;color: #292f3a;letter-spacing: 0;outline: none;background: linear-gradient(-180deg, #fff 8%, #f2f2f7 97%);box-shadow: 0 2px 3px 0 rgba(44, 71, 146, .32), 0 -1px 1px 0 rgba(44, 71, 146, .1);} button[white]:hover {background: linear-gradient(-180deg, #f2f2f7 20%, #f2f2f7 97%);box-shadow: none;color: #3973ff;border: none;} button[white]:active, button[white]:active {background: #d8dde6;transform: scale(.97);} button[white][disabled] {background: rgba(216, 221, 230, .8) !important;pointer-events: none;cursor: default;color: white;box-shadow: none;}/*输入框----------------------------------------*/input {transition: .618s ease;width: 100%;height: 40px;background: #fff;border-radius: 3px;padding: 10px;outline: none;font-size: 16px;color: #292f3a;letter-spacing: 0;line-height: 16px;box-sizing: border-box;border: 1px solid #c0c4cc;} input:hover {border-color: #909399;} input:focus, input:active {border-color: #3973ff;background: #f7f9fc;} input[disabled] {pointer-events: none;background: #f2f5fa;border: 1px solid #c0c4cc;} input[error] {border-color: #dd1a32;background: #ffeff1;} input[error]:focus, input[error]:active {color: #dd1a32;border-color: #ad0015;background: #dd1a3222;}/*下拉框----------------------------------------*/select {transition: .618s ease;width: 100%;height: 40px;font-size: 16px;color: #292f3a;letter-spacing: 0;line-height: 16px;border: 1px solid #c0c4cc;border-radius: 3px;background: #fff;outline: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: 10px 12px 10px 12px;cursor: pointer;} select:hover {border-color: #909399;} select:focus, select:active {border: 2px solid #3973ff;background: #f7f9fc;padding: 9px 11px 9px 11px;} select[disabled] {pointer-events: none;background: #f2f5fa;border: 1px solid #c0c4cc;}/*标签----------------------------------------*/.tag {display: inline-block;position: relative;padding: 6px 12px;font-size: 14px;background: #e4e9f2;color: rgb(32, 17, 172);border-radius: 100px;cursor: default;}/*黑色气泡框----------------------------------------*/.black-arrow-tip {position: relative;display: inline-block;padding: 10px 12px;max-width: 240px;border-radius: 3px;font-size: 12px;color: #fff;line-height: 12px;box-sizing: border-box;background: #292f3a;box-shadow: 0 2px 3px 0 rgba(41, 47, 58, .4);} .black-arrow-tip:after {content: "";position: absolute;left: -4px;top: 11px;display: block;width: 10px;height: 10px;border-radius: 2px;transform: rotate(45deg);background: #292f3a;box-shadow: 0 2px 3px 0 rgba(41, 47, 58, .4);}/*白色气泡框----------------------------------------*/.white-arrow-tip {position: relative;display: inline-block;padding: 10px 12px;border-radius: 3px;max-width: 240px;font-size: 12px;color: #fff;line-height: 12px;background: #fff;box-shadow: 0 -1px 1px 0 rgba(216, 221, 230, .4), 0 2px 4px 0 #ccd0d9;color: rgba(41, 47, 58, .7);} .white-arrow-tip:after {content: "";position: absolute;left: -4px;top: 11px;display: block;width: 10px;height: 10px;background: #fff;box-shadow: -1px 2px 1px 0 rgba(41, 47, 58, .14);border-radius: 2px;transform: rotate(45deg);}/*普通提示----------------------------------------*/.normal-tip {display: inline-block;padding: 10px 12px;background: #525966;border-radius: 2px;font-size: 12px;color: hsla(0, 0%, 100%, .7);letter-spacing: 0;line-height: 12px;}/*关闭按钮----------------------------------------*/.close-btn {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;width: 24px;height: 24px;font-size: 16px;cursor: pointer;display: inline-block;font-style: normal;position: relative;text-align: center;user-select: none;} .close-btn:after {content: "";position: absolute;margin-top: -21px;display: block;width: 100%;height: 100%;border-radius: 100%;background-color: rgba(0, 0, 0, .08);opacity: 0;transform: scale(.5);transition: all .2s cubic-bezier(.175, .885, .32, 1.275);} .close-btn:hover:after {opacity: 1;transform: scale(1.4);}/*卡片----------------------------------------*/.normal-card {border-radius: 8px;box-sizing: border-box;padding: 10px;margin: 10px;background: #fff;box-shadow: 0 2px 4px 0 #ccd0d9;} .card {border-radius: 8px;box-sizing: border-box;padding: 10px;margin: 10px;background: #fff;box-shadow: 0 -1px 3px 0 rgba(216, 221, 230, .3), 0 6px 12px 0 rgba(204, 208, 217, .8);} .large-card {border-radius: 8px;box-sizing: border-box;padding: 10px;margin: 10px;background: #fff;box-shadow: 0 12px 29px 0 #ccd0d9;}/*单选框----------------------------------------*/input[type="radio"] {width: 20px;height: 20px;transform: translateY(4px);}/*复选框----------------------------------------*/input[type="checkbox"] {width: 20px;height: 20px;transform: translateY(4px);}</style>
</head>
<body>
<button>蓝色按钮</button>
<br>
<br>
<button disabled>蓝色按钮（禁用）</button>
<br>
<br>
<button white>白色按钮</button>
<br>
<br>
<button white disabled>白色按钮（禁用）</button>
<br>
<br>
<input type="text" placeholder="请输入…">
<br>
<br>
<input type="text" placeholder="请输入必填项" error="">
<br>
<br>
<input type="text" placeholder="禁止输入" disabled>
<br>
<br>
<select><option value="">选项1</option><option value="">选项2</option><option value="">选项3</option>
</select>
<br>
<br>
<select disabled><option value="">禁止选中</option>
</select>
<br>
<br>
<div class="tag">标签文字</div>
<br>
<br>
<div class="black-arrow-tip">黑色气泡框</div>
<br>
<br>
<div class="white-arrow-tip">白色气泡框</div>
<br>
<br>
<div class="normal-tip">普通提示</div>
<br>
<br>
<i class="close-btn">✕</i>
<br>
<div class="normal-card" style="width: 300px;height: 200px;">普通阴影卡片</div>
<br>
<div class="card" style="width: 300px;height: 200px;">正常阴影卡片</div>
<br>
<div class="large-card" style="width: 300px;height: 200px;">大面积阴影卡片</div>
<br>
<br>
<p>旋转加载</p>
<svg data-v-b9c138e2="" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><path data-v-b9c138e2="" fill="#3973ff" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(332.128 25 25)"><animateTransform data-v-b9c138e2="" attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg><svg data-v-b9c138e2="" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><path data-v-b9c138e2="" fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(332.128 25 25)"><animateTransform data-v-b9c138e2="" attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg><button style="vertical-align:middle"><svg style="transform: translateY(5px);" data-v-b9c138e2="" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><pathdata-v-b9c138e2=""fill="#fff"d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(332.128 25 25)"><animateTransform data-v-b9c138e2="" attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg>loading...
</button>
<br>
<br>
<p>单选框</p>
<input type="radio" name="sex" value="1" checked>男 <input type="radio" name="sex" value="0">女
<br>
<br>
<p>复选框</p>
<input type="checkbox" id="interest-1" name="interest" value="1" checked><label for="interest-1">唱歌</label>
<input type="checkbox" id="interest-2" name="interest" value="2" ><label for="interest-2">跳舞</label>
<input type="checkbox" id="interest-3" name="interest" value="3" checked><label for="interest-3">游戏</label>
<input type="checkbox" id="interest-4" name="interest" value="4" ><label for="interest-4">旅游</label>
<input type="checkbox" id="interest-5" name="interest" value="5" ><label for="interest-5">书法</label>
<br>
<br>
</body>
</html>【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）相关推荐
- 【通用CSS模板】移动端H5页面统一样式.css
/*移动端H5页面统一样式----------------------------------------*/ @charset "UTF-8"; body, html, li, ...
- 选择控件— UI组件系列
重点 (Top highlight) The word "toggle" is a reference to a switch with a short handle that a ...
- WPF 基础控件之 GroupBox样式
其他基础控件 1.Window 2.Button 3.CheckBox 4.ComboBox 5.DataGrid 6.DatePicker 7.Expander GroupBox控件修改Style需 ...
- WPF 基础控件之 ToggleButton 样式
其他基础控件 1.Window 2.Button 3.CheckBox 4.ComboBox 5.DataGrid 6.DatePicker 7.Expander 8.GroupBox 9.ListB ...
- WPF 基础控件之 TabControl样式
其他基础控件 1.Window 2.Button 3.CheckBox 4.ComboBox 5.DataGrid 6.DatePicker 7.Expander 8.GroupBox 9.ListB ...
- Unity3d UGUI基础控件使用（一）
转载自:Unity3d UGUI基础控件使用(一) 一:UGUI介绍 UGUI是Unity4.6之后,经过多重测试,推出全新的UI系统,更灵活,快捷,易用的可视化游戏UI开发工具. 由于之前传统的UI ...
- Android中的基础控件TextView、Button、ImageView、EditText、ProgressBar
文章目录 1 Android中的基础控件 1.1 控件的通用属性 2 TextView 2.1 TextView的继承关系 2.2 TextView的常用属性 3 EditText 3.1 常用属性 ...
- c#ovalshape_【原创】C# 实现拖拉控件改变位置与大小(SamWang)(附源代码下载)
前言: 很多时候我们需要在运行时,动态地改变控件的位置以及大小,以获得更好的布局.比如说实际项目中的可自定义的报表.可自定义的单据等诸如此类.它们有个特点就是允许客户或者二次开发人员设计它们需要的界面 ...
- iOS界面设计之基础控件的学习 --- UITextField
学习iOS界面设计也有段时间了,每次写到一些基础控件(如:UILable . UITextField)的时候就深觉应该总结一个函数来实现这些基础控件的属性设置,所以下面就是我对UITextField的 ...
最新文章
- 【Swing编写图形用户界面】操作系统之磁盘调度算法图形界面和性能比较
- 浅入 spring ioc 单例容器
- 4测试命令_科普 | 最全的Filecoin测试网挖矿步骤解析
- 进程知识点，只需这一篇
- GridView、Repeater合并单元格
- anaconda 历史版本_【windows】下Anaconda详细安装过程
- 1215B. The Number of Products
- 图论 —— 网络流 —— 最大流 —— FF 算法与 EK 算法
- [******] 堆排序
- “表达式必须包含 bool 类型（或可转换为 bool）”
- 做java项目_初学者做java项目的流程
- 谭浩强 C程序设计（第五版）
- SSD固态硬盘主控技术
- Tomcat6.0安装和使用
- C语言编程练习---2021山东理工大学ACM 实验一J---X题解
- 快手公布于香港联交所主板上市计划详情，拟融资394.77亿港元
- SWMM引擎之二——在读SWMM模拟结果时应注意的问题
- 计算机上计算器不见,win10系统自带的计算器不见了的处理教程
- Metasploit自动化攻击——装X必备
- 她来了！她来了！她带着更新走来了！【8月16日】