精华内容
下载资源
问答
我要提问
  • elementUI的form表单样式
    2021-08-27 10:05:45 
    /*form表单的样式*/
  /deep/ .demo-form-inline {
    height: 30px;
    line-height: 30px;
    margin-left: 43px;
    //label样式
    .el-form-item__label {
      color: #D0E9FF;
      font-size: 14px;
      line-height: 30px;
    }

    //输入框样式
    .el-input__inner {
      background: transparent;
      height: 30px;
      line-height: 30px;
      border: 1px solid #D0E9FF;
      color: #FFFFFF;
      border-radius: 0;
    }

    //提示文字样式
    .el-input__inner::-webkit-input-placeholder {
      color: rgba(208, 233, 255, 0.5);
      font-size: 14px;
    }

    //form-item的样式
    .el-form-item__content {
      line-height: 30px;
      position: relative;
      font-size: 14px;
    }

    //日期选择背景颜色
    .el-range-editor .el-range-input {
      background: transparent;
      color: #fff;
    }

    .el-date-editor .el-range-separator {
      color: #D0E9FF;
    }

    .el-date-editor .el-range__icon {
      line-height: 25px;
    }

  }
    更多相关内容

  • 自己比较满意的Form表单样式

     2018-03-01 15:59:51
    写了好多表单样式 ，这个表单样式是我比较满意的Form表单样式
    收起

  • form表单样式

     千次阅读 2017-10-24 10:53:00
    我们会经常遇到许多密码的登录和注册， 这个时候我们就可以先写好一个模块进行参考 源代码如下： ... 表单样式    * {  font-size: 12px;  margin: 0;  padding: 0;  }  input {

    我们会经常遇到许多密码的登录和注册， 这个时候我们就可以先写好一个模块进行参考微笑

    源代码如下：

    <!DOCTYPE html>

    <html>
    <head>
        <meta charset="UTF-8">
        <title>表单样式</title>
        <style type="text/css">
            * {
                font-size: 12px;
                margin: 0;
                padding: 0;
            }


            input {
                width: 320px;
                height: 24px;
                border: 1px solid #999;
                border-radius: 4px;
            }


            .formErr {
                border: 1px solid red;
            }


            .form .label {
                display: block;
                float: left;
                width: 128px;
                height: 40px;
                line-height: 40px;
                text-align: end;
            }


            .form .txt {
                display: block;
                float: left;
                width: 340px;
                height: 40px;
                line-height: 40px;
                padding-left: 16px;
            }


            .form button {
                width: 56px;
                height: 24px;
                background-color: green;
                border: 0;
                border-radius: 4px;
                color: white;
            }


            .form .errTips {
                width: 226px;
                background-color: lightpink;
                color: darkred;
                border-radius: 4px;
                margin-left: 144px;
                margin-top: 6px;
                margin-bottom: 4px;
                padding: 16px 48px;
            }
        </style>
    </head>
    <body>
    <div class="form">
        <div>
            <span class="label">用户名</span>
            <span class="txt"><input type="text" placeholder="6-20个字符"/></span>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label">密码</span>
            <span class="txt"><input type="password" placeholder="6-20个字符" class="formErr"/></span>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label">重复密码</span>
            <span class="txt"><input type="password" placeholder="再次输入密码"/></span>
        </div>
        <div style="clear: both"></div>
        <div class="errTips">
            <ul>
                <li>密码长度不能小于6个字符！</li>
                <li>密码不能为空！</li>
                <li>两次密码输入不一致！</li>
            </ul>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label"></span>
            <span class="txt"><button>提交</button></span>
        </div>
        <div style="clear: both"></div>
    </div>
    </body>
    </html>
    收起
    展开全文

  • CSS 书写原生form表单样式

     2022-01-07 19:25:44
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...Do. 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 表示给禁用的input添加样式 */
    input:disabled{ 
        background-color: red;
    }
    /* 表示给没有禁用的input添加样式 */
    input:enabled{
        background-color: green;
    }
    /* 表示给选中的input紧挨着的兄弟元素设置样式 */
    input:checked+label{
        color: pink;
    }
    /* 表示给必填的元素设置样式 */
    input:required{
        border: 9px double darkblue;
    }
    /* 表示给非必填元素设置样式 */
    input:optional{
        border: 5px solid yellow;
    }】
    /* 表示带有email的input的元素在生效后的样式 */
    input[email]:valid{
        background-color: #569;
    }
    /* 表示带有email的input的元素在失效后的样式 */
    input[email]:invalid{
        background-color: lightcoral;
    }
</style>
<body>
    <form action="">
        <input type="text" disabled> <!--disabled表示这个input被禁用-->
        <input type="text">
        <input type="text" required> <!--required表示这个input在这个form表单中时必填的元素-->
        <input type="email" email>  <!--表示这个input的类型是email类型-->
        <hr>
        <input type="radio" name="sex" id="body">
        <label for="boy">男</label>
        <input type="radio" name="sex" id="gril">
        <label for="gril">女</label>
        <hr>

        <button>提交 </button>
    </form>
</body>
</html>

    效果演示如下：

     

    收起
    展开全文
    css html elementui

  • 如何设置好看的form表单样式_HTML表格表单

     千次阅读 2020-11-20 13:36:55
    https://www.zhihu.com/video/1243668780129435648 每日测验 """ 答案 1. ascii:8位一个字节,1个字节表示一个字符....验证form表单提交数据 # 接下来的框架代码无需掌握 看一下效果即可 总结 1. 作业 今日作业
    5308edc4e39eb3b70d0dd0d8a1e32e7f.png
    https://www.zhihu.com/video/1243668780129435648

    每日测验

    """

    答案

    1.
ascii:8位一个字节,1个字节表示一个字符.即: 2 ** 8 = 256,所以ASCII码最多只能表示256个字符.只有英文和一些符号
unicode：俗称万国码,把所有的语言统一到一个编码里.解决了ascii码的限制以及乱码的问题.unicode码一般是用两个字节表示一个字符,特别生僻的用四个字节表示一个字符.
utf-8：它是一个"可变长的编码方式",如果是英文字符,则采用ascii编码,占用一个字节.如果是常用汉字,就占用三个字节,如果是生僻的字就占用4~6个字节.
gbk：国内版本,一个中文字符 == 两个字节 英文是一个字节

2.Ⅰ：m,n = n,m
Ⅱ：
x = m
m = n
n = x

3.浅拷贝（shallow copy）：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存；
  深拷贝（deep copy）：复制并创建一个一摸一样的对象，不共享内存，修改新对象，旧对象保持不变。

4.HTTP协议：
基于TCP/IP协议作用于应用层的协议，基于请求响应，无状态无连接的协议

5.<h1> <p> <div> <span> <b> <s> <i> <u> <img> <a> <table> <form> <select> <input>

    昨日内容回顾

    • Web的本质
    浏览器
服务端
文件(html文件)
    • HTTP协议
    HTTP协议的由来(sql语句由来)
	浏览器只有一个如何兼容N多个服务端

# 四大特性
  1 基于请求响应
  2 基于TCP/IP作用于应用层之上的协议
  3 无状态
  	无论来多少次 都待你如初见
   	如何做到保存用户状态？？？
    	cookie、session、token
  4 无/短链接
  	请求来我响应你 之后就没有联系了
    长链接:websocket(群聊功能、服务端主动给客户端发送消息)

# 请求数据格式
  请求首行(HTTP协议的版本，当前请求方式)
  请求头(一大堆k，v键值对)
  
  请求体(并不是所有的请求方式都有请求体,get没有post有)
  
# 响应数据格式
  响应首行(HTTP协议的版本，响应状态码)
  响应头(一大堆k，v键值对)
  
  响应体(浏览器展示给用户看的内容)
 
# URL
	统一资源定位符 类似于坐标
# 请求方式
	1.get请求
  	朝别人要数据(也是可以携带参数的，只不过参数不是放在请求体里面的,而是直接放在url的后面)
  	url?username=jason&password=123
  2.post请求
  	朝别人提交数据

# 响应状态码
# 用简短的数字来表示一大串提示性信息
1XX:服务端已经成功接收到了你的数据 正在处理你可以继续提交
2XX:请求成功(200 OK)
3XX:重定向(你想访问A页面但是给你调到了B页面)
4XX:请求错误(404请求资源不存在、403请求不符合条件)
5XX:服务端内部错误(500)
ps:上述的状态码是HTTP协议规定的，其实到了公司之后每个公司还会自己定制自己的状态及提示信息
  	公司A
    	1000:
      1001:
      1002:
    公司B
    	2001:
      2002:
      2003:
      ...
    • HTML
    超文本标记语言(你在学习它的时候只需要记忆每个标签表示什么意思即可)
书写网页的一套标准
	除了HTML可以书写前端页面之外
	还有XML也可以书写前端页面 
		odoo框架内部的前端页面全部是用XML书写
			公司内部管理软件 ERP


# 注释  <!--注释-->

# 文档结构
<html>
	<head></head>：都不是给用户看的 主要是给浏览器看的一些配置信息
  <body></body>：body书写的所有的内容 都是给用户看的
</html>
    • head内常用标签
    • body内基本标签
    h1～h6 标题标签
p段落标签
u i b s
hr
br


# 特殊符号
空格  &nbsp;
大于	&gt;
小于  &lt;
&amp;
&reg;
&copy;
&yen;

    # 特殊符号 空格 大于 > 小于 < & ® © ¥ ```

    • 常用标签
    div：网页初期划定区域范围
span：划定文本的


# a标签
	链接标签
  	<a href='' target=''></a>
    	href
      	1.可以放一个url点击自动跳转
        2.还可以放其他标签的id值 锚点功能
      
      target
      	控制是否在当前页跳转
        	_self
          _blank
# img标签
	图片标签
  	<img src='' alt='' title='' height='' width=''/>
    	src
      	1.可以放图片的路径 本地或者线上
        2.还可以放一个url 会自动朝该url提交get请求获取图片数据展示(暂时不考虑)
      
      alt
      	图片加载不出来的时候	展示的提示信息
       
     	title
      	鼠标悬浮在图片上之后展示的提醒信息
      
      height、width
      	单独调整某一个 另外一个会自动等比例缩放
        如果两个都调整了 可能会出现图片的失真
 
# 标签一般情况下都需要有两个重要的属性
	id值
  	唯一标示  同一个页面不能有重复	
  class值	
    类似于类的继承 可以有多个
    • 标签的分类
    分类1:
	双标签
		<h1></h1>
	单标签
		<img/>
	
分类2:
	块儿级标签:独占一行  可以设置长宽
		div p
		注意：块儿级标签内部可以嵌套任意的行内标签和块儿级标签
			但是p标签只能嵌套行内标签
	行内标签:自身文本多大就占多大  不能设置长宽
		span a img
	
	PS：上述的规定只是HTML书写规范 如果你不遵循 不会报错
	浏览器会自动帮你解除嵌套关系
    • 列表标签
    ul
	li
页面上只要是带有规则的排序文字 一般用的都是无序列表	

ol
	li
有序列表

dl
	dt
  dd
标题列表

    今日内容概要

    • 表格标签(只要是展示数据 一般都可以使用表格标签)
    • 表单标签(重要:获取前端用户数据发送给后端)
    • 偷窥一下后端框架的基本使用(flask)
    • css层贴样式表(选择器)

    表格标签

    id

    表单标签

    # 能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器

    验证form表单提交数据

    # 接下来的框架代码无需掌握  看一下效果即可

    总结

    1.

    作业

    今日作业
    收起
    展开全文

  • 如何设置好看的form表单样式_React form 表单组件的解决方案

     2020-11-20 14:53:44
    而对于设计一个表单组件来说，主要需要考虑以下三点：各个元素如何排版布局管理各个元素的值表单验证(即时校验及提交的全部校验)目前已经有了一批优秀的 form 表单解决方案，但是要解决上述的三大问题，都比较费劲，...
    收起

  • form表单样式自定义

     千次阅读 2019-01-25 17:05:00
    .form-group>input[type="password"]:focus { color: #495057; border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); } input[type='radio'], input[type='checkbox'] { ...
    收起

  • css form表单样式清除

     2017-03-27 14:43:00
    css form表单样式清除 开发项目中表单常用的清楚样式： 1、改变placeholder默认字体颜色 ::-webkit-input-placeholder{color: #333;} :-moz-placeholder{color: #333;} :-moz-placeholder{...
    收起

  • form表单样式案例 定义html表单细边框样式

     千次阅读 2021-06-10 03:36:21
    css如何清除form表单样式的示例开发项目中表单常用的清楚样式：改变placeholder默认字体颜色 -webkit-input-placeholder{color: #333;} -moz-placeholder{color: #333;} -moz-placeholder{color: #333;} -ms-input-...
    收起

  • form表单样式案例

     千次阅读 2017-09-06 22:05:53
    <p class="p2"> 你喜欢这个表单吗？ <img src="img/line.png" width="220px"></p>  喜欢 不喜欢 <p class="p2"> 你喜欢什么运动? <img src="img/line.png" width="245px"></p> 足球 篮球 篮球 ...
    收起
    form表单 html radio checkbox

  • 【uView】u-form表单样式、el-input的样式

     千次阅读 2021-10-29 15:44:22
    删除下边框 ...u-form :model="form" ref="uForm" :error-type="['toast']" label-width="160" :border-bottom="false" label-position="left"> <u-form-item label="收货人" prop="name" :bor..
    收起
    javascript 开发语言

  • 精美form表单css样式

     千次阅读 2021-06-10 09:14:23
    css如何清除form表单样式的示例开发项目中表单常用的清楚样式：改变placeholder默认字体颜色 -webkit-input-placeholder{color: #333;} -moz-placeholder{color: #333;} -moz-placeholder{color: #333;} -ms-input-...
    收起

  • 最酷的Form表单样式，能很好很方便的加入到你的UI中。

     热门讨论 2008-12-11 14:44:11
    关于Form表单的美化，能比较方便、比较简单的加入到你的UI中，主要美化的内容有select radio checkbox 等，能够使你的UI更加漂亮美观，并能够自己定制样式。
    收起

  • element-ui的form表单样式改动

     千次阅读 2018-08-14 15:05:00
    造成下面样式错乱是下面自带的css样式，原本打算通过样式...后来把写在这个表单的el-form的login-form的类名删掉（这个类名删掉对我其他视图没有影响，经过搜索），则这种情况解决。 因为只有el-form-item_conte...
    收起

  • 全面解析Bootstrap表单使用方法（表单样式）

     2020-12-28 21:03:36
    一、基础表单 <form > <div class=form-group> 邮箱： <input type=email class=form-control placeholder=请输入您的邮箱地址> <div class=form-group> 密码 <input type=password class...
    收起

  • 带背景Form注册表单HTML模板

     2021-06-24 05:11:57
    带背景Form注册表单HTML模板是一款Step Registration Form注册表单html模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
    收起

  • form表单实现表格样式 -- 改css实现

     2021-04-09 16:52:59
    效果图如下： 因为是以弹框形式出现，所以外层包了dialog ...el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="250px" class="form"> <el-form-item label="基本户开户名">
    收起

  • django修改form表单的样式css

     千次阅读 2020-03-16 10:10:02
    可以使用django自身的渲染模板，但是没有现在前端框架渲染出来的好看，所以我们使用attrs参数，代码如下： 本文目录编写表单类视图处理模板使用 ...class TaskForm(forms.Form): task_domain = forms.CharF...
    收起

  • vue使用elementUI form表单label样式修改

     千次阅读 2021-10-06 17:38:00
    更多关于修改ElementUI样式的方法，可以参考这篇文章 ...2.在对应el-form-item的label属性中加入class样式 <el-form-item label="用户名" class="item"> <el-input v-model="ruleForm.usernam..
    收起
    elementui vue.js css

  • 微信小程序form表单组件示例代码

     2021-01-03 08:52:22
    表单中 formType 为 submit 的<button/>组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。 属性名 类型 说明 report-submit Boolean 是否返回formId用于发送模板...
    收起

  • Form表单中的各种样式

     千次阅读 2018-04-13 23:45:38
    很多时候，我们仅仅为了实现数据采集这个功能来使用表单，常看到的...　1、CSS魔法CSS，就是大家知道的层叠样式单，它可以定义页面元素的外观，包括字体样式、背景颜色和图像样式、边框样式、补白样式、边界样式等...
    收起

  • 修改element里form的样式

     千次阅读 2020-08-18 10:07:26
    1.改变表单中的某项label的样式 在assets文件夹下新建myform.css文件 .itemlabel .el-form-item__label{ font-size:22px; } 在main.js全局引入myform.css文件 //导入myform样式 import './assets/css/myform.css' ...
    收起
    element

  • Yii2 Form表单样式修改

     千次阅读 2017-08-11 07:39:01
    以下为主要的样式修改的代码，大家可以看着修改。如需要修改类而不是样式，只需要替换style为...$form = ActiveForm::begin(['action' => ['site/login'], 'method' => 'post']);?> 'width:255px;min-height:
    收起

  • html表单样式 如何用js给html表单设置style

     2021-07-01 02:09:58
    html中如何设置form大小首先打开hbuilder编辑器，新建一个html文件，写一个form表单，并设置class属性值，form中设置两个input标签： 不要随便遇到一个人就对他掏心掏肺的，在你看来，他是朋友，在他看来，你是个...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 97,071
精华内容 38,828
热门标签
关键字：

form表单样式