【CSS】关于表单样式
【CSS】关于表单样式
- 关于表单样式
- 一、文本框样式
- 二、选框样式
- 三、按钮样式
- 四、下拉框样式
关于表单样式
【注意】:以下样式只在Chrome浏览器下设置成功,其它浏览器可能有所差异,需要单独设置、自行调整
一、文本框样式
正常情况下,普通文本框的样式如下(未聚焦和聚焦状态)
首先,文本框的样式大部分都可以通过我们已知的CSS属性进行修改
input[type=text] {/* 通过width/height设置宽高 */width: 100px;height: 30px;/* 设置字体样式 */font-size: 18px;font-weight: bold;/* 设置内边距 */padding: 0 5px; }
然后,最重要的应该是边框样式的设置,也是我们非常熟悉的border属性
PS:以下样式的设置是在上面样式设置的基础上进行的
input[type=text] {/* 通过border设置边框样式 */border:5px solid red;border-radius: 8px; }
【注意】:如果不设置边框样式,就会出现下面图片中第一种情况,即左上部分的颜色要暗一点
其次,当聚焦时,文本框周围会有一圈轮廓,我们可以通过outline属性来控制
input[type=text] {/* 通过outline设置轮廓 */outline-style: dashed;outline-offset: 5px;outline-color: dodgerblue;outline-width: 5px;/* outline: none; */ }
解析:
outline-offset
:即轮廓对文本框的偏移量,可以为负数,负数即显示在文本框内部outline-color
:轮廓颜色outline-width
:轮廓宽度outline-style
:轮廓样式【注意】:如果设置了轮廓样式,则轮廓会常显;不设置样式,则默认在聚焦时才显示,默认样式为直线,轮廓无法圆角
一般情况,设置
outline:none
即可 (隐藏轮廓)接下来,通过:focus伪类,来控制文本框聚焦时的样式
input[type=text]:focus {/* 聚焦时样式 */box-shadow: 0px 0px 12px -1px #b1c1c3; }
添加聚焦时的样式,如阴影,轮廓样式等等
还可以通过:placeholder伪类来控制提示信息的样式
input[type=text]::placeholder {/* 提示信息样式 */font-size: 14px;color: rgba(136, 127, 127, 0.774); }
二、选框样式
结合
<label>
标签,为绑定的选框设置样式
前提条件:标签的for属性要与选框的id属性相同,即进行了绑定
实现思路:
- 隐藏选框,再为
<label>
标签添加::before伪类或者::after伪类 - 通过这个伪类设置新的样式
- 结合选框的:checked伪类属性,设置选中状态时的样式
- 隐藏选框,再为
实现过程:(以单选框为例)
隐藏单选框
input[type="radio"] {/* 直接设置大小为0 */width: 0;height: 0; }
添加伪类
label::before {content: "";display: inline-block;/* 用vertical-align来对齐文本 */vertical-align: middle;width: 20px;height: 20px;margin-right: 10px;border-radius: 50%;border: 5px solid darkgreen; }
选中状态
input[type="radio"]:checked+label::before {background-color: lightgreen;padding: 0px; }
或者直接给
<label>
标签设置样式,再结合:checked伪类属性,设置选中样式
三、按钮样式
先设置基本样式,用常用的属性就可以设置
input[type=button], input[type=submit], input[type=reset] {width: 80px;height: 30px;color: white;background-color: #5bb85d;font-size: 18px;font-weight: bold; }
主要是边框样式,和文本框样式的边框设置一样,使用border属性,更改默认的边框样式,使用outline属性,更改默认轮廓样式
input[type=button], input[type=submit], input[type=reset] {/* border+outline */border-radius: 3px;border: none;outline: none; }
其它的还可以通过伪类属性,设置点击时的样式:active,聚焦时的样式:focus,等等
四、下拉框样式
基本样式还是可以用已知的属性来设置,对于边框仍然采用border+outline属性来设置
select {width: 150px;height: 30px;color: #444;font-size: 16px;font-weight: bold;/* border+outline */border-radius: 3px;border: 3px solid skyblue;outline: none; }
通过text-align-last属性,来控制下拉框里的文字居中,通过appearance属性,隐藏下拉箭头
select {/* 文字间距 */letter-spacing: 2px;/* 文字居中 */text-align-last: center;appearance: none;/* 背景颜色 */background-color: #fff;background: linear-gradient(white, #e5e5e5); }
对于option元素,只能设置一般的字体文本样式
option {font-size: 14px;font-weight: bold;color: red;background-color: #adff2f; }
只有字体文本样式才会生效
无法设置位置样式、悬浮样式
背景颜色无法透明,透明时默认白色
因此,要更改option的样式,只能通过其它元素模拟来实现下拉框
其它的,在行内设置样式size属性和multiple属性
<select size=2>...</select>
表示显示两个选项出来
这时下拉框里的内容被option里的内容填充,显示数量为两个选项,且此时通过滚动来切换显示
select{/* 取消高度 *//* height:30px *//* 文本垂直方向居中对齐 */vertical-align: middle; }
<select multiple>...</select>
可以搭配size属性,设置具体的显示数量
鄙人拙见,不足之处,万望海涵!
【CSS】关于表单样式相关推荐
- 用于设定表格样式的附加css,css设置表格与能表单样式.ppt
css设置表格与能表单样式 第6章 CSS设置表格与表单样式 学习目标 什么是表格模型 对数据表格应用样式. 创建简单和复杂的表单布局 对各种表单元素应用样式. 掌握CSS中用列表制作各种菜单的方法. ...
- 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式 表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
- css美化表格和表单样式
Css美化表格和表单样式 表格创建默认是没有边框的,我们要用boder属性去设置表格的边框 表格基本样式 表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用: ...
- 还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加 上图: 带鼠标滑动效果的table样式看起来比较清爽 样式 <he ...
- css在线留言星号,使用CSS 给表单必选项添加星号的实现方法
在制作网页表单的时候,如果一个选项是必填的,通常会给选项添加一个星号,比如 Typecho 的评论表单: 姓名 * 示例: *姓名 然后给星号添加一点 CSS 样式: .form-group span ...
- 1-17. Bootstrap 表单样式汇总
网站数据交互一般都是通过表单实现 Bootstrap中表单布局类型有哪些? 垂直表单 内联表单 水平表单 向父 <form> 元素添加 role="form" 把标签和 ...
- jquery表单样式
使用jquery做的表单样式,有隔行变色.点击换色.选中换色等等 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" &quo ...
- 基于css的表单模板
代码 /* General styles */ body { margin : 0 ; padding : 0 ; font : 80%/1.5 Arial,Helvetica,sa ...
- java 表单_Java报表表单设计之表单样式设计
阅读提示: 文章中与FineReport软件使用的相关内容,基于软件的V7.0旧版本编写,不代表软件最新的使用方式. FineReport最新版免费试用:https://www.finereport. ...
- file html5 样式,CSS小技巧之自定义个性的file表单样式
每当看到别人家的东西,总是那么的优美,他们的是这样的: 再想想自己家的是这样的. 样式没个性就算了,还那么多的废字,今天我们分享的就是如何把file表单做的漂亮些,废话不多说,直接进入正题. 其实当初 ...
最新文章
- CS0016: 未能写入输出文件的解决方法
- linux除了eeprom其他的保存方法,linux的EEPROM的读写控制.doc
- 【C++】利用Visual Studio 2008编写C++,Visual Studio 2008的基本使用
- android开发Proguard混淆与反射
- 浅谈爬虫 《一》 ===python
- 【数据结构与算法】二叉查找树的Java实现
- 如何在linux当中,大量的添加用户
- MySQL集群架构-DRBD+headbeat +lvs+keepalived
- gensim提取一个句子的关键词_包含关键字 关键词提取 的文章 - 科学空间|Scientific Spaces...
- rgss3a解包器_Rgss3a解包器下载
- scratch好书推荐
- bilibili发送弹幕
- android+注册+代码,简单的Android用户注册登录实现
- SDN软件定义网络 学习笔记(4)--数据平面
- R语言 图片识别文字 PNG JPG图片转文字 OCR tesseract包
- CVPR 2022 | 涨点显著!AMD提出:动态Sparse R-CNN
- 白鹭小游戏-成语挑战-资源放置
- element ui中select 下拉框在火狐浏览器最后一行显示不完全(谷歌正常)
- JQuery AutoComplete插件实现自动补全
- Java,微信交流学习群