form表单样式自定义

最新推荐文章于 2024-05-16 01:51:20 发布
最新推荐文章于 2024-05-16 01:51:20 发布
阅读量3.7k 收藏 5
点赞数 1
文章标签： python
原文链接：https://my.oschina.net/u/1778998/blog/3006027
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

https://i.imgur.com/CO3kk9D.png

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html {
        padding: 0px;
        margin: 0px;
        font-size: 0.75rem;
    }

    body {
        padding: 0px;
        margin: 0px;
        font-size: 1.0rem;
    }

    form {
        width: 400px;
        margin: 20px;
    }

    .form-group {
        margin-bottom: 1.25rem;
    }

    .form-group {
        display: flex;
        align-items: center;
    }

    .form-group>label {
        width: 5.0rem;
        text-align: right;
        box-sizing: border-box;
        padding-right: 1.25rem;
        align-self: center;
    }

    .form-group>input {
        flex-grow: 1;
        border: 1px solid #ddd;
        border-radius: 0.25rem;
        padding: .375rem .75rem;
        font-size: 1.0rem;
        background-color: #fff;
        background-clip: padding-box;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    .form-group>input[type='text']:focus,
    .form-group>input[type="textarea"]:focus,
    .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'] {
        display: none;
    }

    input[type='radio']+label,
    input[type='checkbox']+label {
        margin-right: 1.25rem;
    }

    input[type='radio']+label:before,
    input[type='checkbox']+label:before {
        content: "";
        /*不换行空格*/
        display: inline-block;
        width: 1.2rem;
        height: 1.2rem;
        margin-right: .4rem;
        border-radius: 100%;
        border: 1px solid #ddd;
        line-height: 1;
        box-sizing: border-box;

    }

    input[type='radio']+label:before {
        vertical-align: -0.166667rem;
        /*因为content为空，数据无法对齐，只能用vertical-align调整*/
    }

    input[type='radio']:checked+label:before {
        background-color: #5cb5f9;
        background-clip: content-box;
        padding: .15rem;
        border-color: #5cb5f9;
    }

    input[type='checkbox']+label:before {
        content: "√";
        color: #fff;
        border-radius: 0.25rem;
        font-weight: bold;
    }

    input[type='checkbox']:checked+label:before {
        background-color: #5cb5f9;
        text-align: center;
        font-weight: bold;
        border-color: #5cb5f9;

    }

    input[type='checkbox']#switch+label {
        cursor: pointer;
        width: 4rem;
        height: 1.5rem;
        display: block;
        position: relative;
        border: 1px solid #727577;
        background-color: #727577;
        border-radius: 1rem;
        margin-right: 0px;
        -webkit-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;

    }

    input[type='checkbox']#switch+label:before {
        content: "";
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 100%;
        background: #fff;
        position: absolute;
        margin-right: 0px;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;

    }

    input[type='checkbox']#switch+label:after {
        content: attr(data-off);
        color: #fff;
        position: absolute;
        right: 0.5rem;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

    input[type='checkbox']#switch:checked+label {
        border: 1px solid #5cb5f9;
        background-color: #5cb5f9;
    }

    input[type='checkbox']#switch:checked+label:before {
        right: 0px;
    }

    input[type='checkbox']#switch:checked+label:after {
        content: attr(data-on);
        left: 0.5rem;
    }

    .form-range-group {
        width: 12.5rem;
    }

    input[type=range] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /*这三个是去掉那条线原有的默认样式，亲测没啥用！*/
        width: 100%;
        border: none;
        outline: none;
        margin: 0px;
        padding: 0px;
        display: block;
    }

    /*设置控制条轨迹的样式*/
    /* chrome 或者 safari */
    input[type='range']::-webkit-slider-runnable-track {
        height: 1rem;
        background-color: #eee;
        border-radius: 1rem;
    }

    /*firefox */
    input[type='range']::-moz-range-track {
        height: 1rem;
        background-color: #eee;
        border-radius: 1rem;
    }

    /*IE*/
    input[type="range"]::-ms-track {
        color: transparent;
        background-color: #eee;
    }

    /*设置控制的拖拽按钮样式*/
    /*firefox 和 chrome*/
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 1rem;
        width: 1rem;
        border-radius: 20%;
        background: #1ba1e2;
        cursor: pointer;
        /*占用空间最小高度为16px,在父元素中使用align-items:center改变占用空间*/
    }

    /*firefox */
    input[type='range']::-moz-range-thumb {
        -moz-appearance: none;
        height: 1rem;
        width: 1rem;
        border-radius: 20%;
        background: #1ba1e2;
        border: none;
        cursor: pointer;
        /*占用空间最小高度为17.33*/
    }

    /*IE*/
    input[type='range']::-ms-thumb {
        -ms-appearance: none;
        height: 1rem;
        width: 1rem;
        border-radius: 20%;
        background: #1ba1e2;
        border: none;
        cursor: pointer;
    }




    .btn {
        display: inline-block;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        padding: .375rem .75rem;
        line-height: 1.5;
        border-radius: .25rem;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    .btn:not(:disabled):not(.disabled) {
        cursor: pointer;

    }

    .btn-primary {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-primary:hover {
        filter: hue-rotate(14deg);
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <form action="">
            <div class="form-group">
                <label for="inputname">输入框</label>
                <input type="text" name="inputname" id="inputname">
            </div>
            <div class="form-group">
                <label for="inputpassword">密码框</label>
                <input type="password" name="inputpassword" id="inputpassword">
            </div>
            <div class="form-group">
                <label for="inputradio">单选</label>
                <div class="form-radio-group">
                    <input type="radio" name="radio" value="true" id="yes">
                    <label for="yes">YES</label>
                    <input type="radio" name="radio" value="false" id="no">
                    <label for="no">NO</label>
                </div>
            </div>
            <div class="form-group">
                <label for="inputradio">多选</label>
                <div class="form-check-group">
                    <input type="checkbox" name="checkbox1" value="checked1" id="checked1">
                    <label for="checked1">checked1</label>
                    <input type="checkbox" name="checked2" value="checked2" id="checked2">
                    <label for="checked2">checked2</label>
                </div>
            </div>
            <div class="form-group">
                <label for="switchinput">开关</label>
                <div class="form-swith-group">
                    <input type="checkbox" name="switch" id="switch">
                    <label for="switch" class="switch" data-on="on" data-off="off"></label>
                </div>
            </div>
            <div class="form-group">
                <label for="range1">滑块</label>
                <div class="form-range-group"><input type="range" name="range1" id="range1" min="0" max="100" step="1">
                </div>
            </div>
            <div class="form-group">
                <label for=""></label>
                <div class="form-button-group">
                    <button type="submit" class="btn btn-primary">提交</button>
                    <button type="reset" class="btn">取消</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

转载于:https://my.oschina.net/u/1778998/blog/3006027

weixin_34128534
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自己比较满意的Form表单样式
03-01
写了好多表单样式 ，这个表单样式是我比较满意的Form表单样式
form表单样式
hongfuqiang的博客
10-24 1万+
我们会经常遇到许多密码的登录和注册， 这个时候我们就可以先写好一个模块进行参考 源代码如下：         表单样式             * {             font-size: 12px;             margin: 0;             padding: 0;         }         input {
vue如何实现自定义表单
2401_85013639的博客
05-16 412
【代码】vue如何实现自定义表单。
表单的一些样式以及属性
qq_52908359的博客
04-22 519
1.form表单元素的type类型： text 文本框 password 密码（显示密文） radio 单选 checkbox 复选 button 按钮 submit 提交 reset 重置 file 文件 hidden 隐藏 注：在使用submit按钮时，点击它会将表单新题提交到指定的位置，而button不能实现这一功能 2. （1）.下拉选择框：select/option （2）.文本域：t..
第八篇 表单详情 form
m0_66451927的博客
02-08 757
一、表单 1.1基础 表单<from> 1、表单重要属性：action，表示当前表单需要提交的地址 以注册为例，在web开发中，用户需要填写信息并提交完成注册操作，当我们点击提交按钮时，页面会把我们的信息给与到action属性对应的链接里，所以在action后面添加的是一个链接地址， <from action="url链接地址"> </from> 2、<name>属性 了添加<name>会比较规范，容易识别，如果我们添加<na
普通弹出框table表单样式和form表单常见样式：一行两个
m0_62823653的博客
09-28 1323
第一部分：表单样式第一部分：表单样式vue中弹出框table表单样式第二部分：colgroup。
表单文件选择框样式自定义示例
12-13
表单文件选择框样式</title><style type=”text/css”>body{font-family:Arial,Verdana,sans-serif; margin:100px;}</style><style type=”text/css”>.uploader{position:relative;display...
拖拽表单自定义
02-06
在IT行业中，表单自定义是一项重要的功能，它允许用户根据需求自由配置和布局表单元素，提升用户体验并满足多样化的需求。"拖拽表单自定义"是这种功能的一种实现方式，尤其适用于Web应用程序和数据录入系统。在这个...
简单的form表单模板
01-16
本文将深入探讨“简单的form表单模板”及其相关知识点。 首先，我们需要了解HTML中的`<form>`标签。它是创建表单的基础，用于定义用户输入数据的区域。例如： ```html <form action="submit.php" method="post"> ...
基于jQuery和layui的form表单自定义js动态生成
03-09
layui的表单组件支持多种表单元素和验证规则，可以方便地创建和定制表单样式。 三、动态生成表单 1. 引入依赖：首先，在HTML文件中引入jQuery和layui的CDN链接，确保它们在页面加载时可用。 ```html ...
Form表单模拟美化插件特效代码
03-20
传统的HTML Form表单元素，如`<input>`、`<select>`、`<textarea>`等，其样式受浏览器限制，样式统一且单调。而这款插件通过JavaScript和CSS技术，可以对这些元素进行深度定制，实现更丰富的动画效果、自定义样式和...
漂亮的表单验证样式，纯HTML
03-27
漂亮的表单验证样式 纯HTML 单个文件 实用
最酷的Form表单样式，能很好很方便的加入到你的UI中。
12-11
关于Form表单的美化，能比较方便、比较简单的加入到你的UI中，主要美化的内容有select radio checkbox 等，能够使你的UI更加漂亮美观，并能够自己定制样式。
一个很漂亮的表单样式，用div+css实现
04-14
1.有各种很漂亮的表单样式， 2，表单用div+css，还有js控制实现很炫的效果
40多款漂亮的form表单设计
05-26
介绍40多个漂亮的网页表单例子以及现代的解决方案和与网页表单设计有关的创造性思维.其中有一些是flash的；尽管如此，在大多数情况下，你能很容易的使用简单的css和(x)html来创建相同的设计.
form表单美化插件
12-12
该插件具有美化所有的form表单元素，暴露了表单元素的单击和取值等各种操作的方法，兼容各大浏览器
HTML常用标签之表单form
weixin_45604020的博客
06-21 9063
表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并且通过标签的提交操作，把采集到的信息提交到服务器端进行处理。
java_web1:基本标签、form表单、frameset框架标签、CSS样式、javascript、servlet
lpg432的博客
08-28 1199
前端三剑客: html,css,js(javascript) html: Hyper Text Markup Language:超文本标记语言 针对字体,图片,视频,音频等等进行操作,设置字体颜色,大小,设置图片的宽度和高度 h5的一些标签对视频或者音频操作! 通过html标签 写半成品的网页 ----- 类似于房屋的主体结构 通过css(层叠样式表):能针对html标签进行修饰 ----类似于房屋的装修 通过js(javascript):实现效果(轮播图,js事件编程)----类似房屋中的功能 htm
好看的表单样式大全
热门推荐
wangwilliams的专栏
11-20 1万+
好看的表单样式大全 1、只有下划线的文本框： 2、软件序列号式的输入框： if(value.length==3)document.all[event.srcElement.sourceIndex+1].select(); ————— 3、软件序列号式的输入框(完整版)： if(value.length==maxLength)document.all[event.srcEle
element plus form表单样式修改
最新发布
06-13
在Element Plus的Form表单中，样式修改可以通过CSS直接进行，或者利用其自定义主题功能来定制全局样式。以下是几种常见的样式调整方法： 1. **直接修改CSS**： - 如果你只想针对特定的组件或元素修改样式，可以在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值