美化表单元素

傷城~ 2023-02-27 13:53 19阅读 0赞

### 美化表单元素 ###

*  美化表单元素
 *   *  新的伪类
     *  常见用法

# 美化表单元素 #

## 新的伪类 ##

1.  focus

元素聚焦时的样式

input{ 
                color: #999;
             }
            input:focus{ 
                outline: 1px solid #f00;
                outline-offset: 0;
                color: #333;
            }

1.  checked

单选或多选框被选中的样式

<body>
        <input type="radio" name="gender">
        <label for="radmale">男</label>
    
        <input type="radio" name="gender">
        <label for="radfemale">女</label>
    </body>

<style> input:checked+label { 
                color: #f00;
            }
        </style>

## 常见用法 ##

1.  重置表单元素样式
2.  设置textarea是否允许调整尺寸

css属性resize：

*  both： 默认值，两个方向都可以调整尺寸
 *  none：不能调整尺寸
 *  horizontal：水平方向可以调整尺寸
 *  vertical：垂直方向可以调整尺寸

<body>
            <textarea></textarea>
        </body>

<style> textarea{ 
                resize: both;
            }
        </style>

1.  文本框边缘到内容的距离

<body>
       <input type="text">
    </body>

<style> input{ 
                /* 方法一 */
                /* padding: 0 1em; */
                /* 方法二 */
                text-indent: 1em; 
            }
        </style>

1.  控制单选和多选的样式

<body>
        请选择性别：
        <label>
            <input type="radio" name="gender">
            <span></span>
            <span>男</span>
        </label>
        <label>
            <input type="radio" name="gender">
            <span></span>
            <span>女</span>
        </label>
    </body>

<style> label input:focus~span { 
                color: #f00;
            }
    
            label input+span { 
                width: 10px;
                height: 10px;
                display: inline-block;
                border-radius: 50%;
                border: 1px solid gray;
            }
    
            label input:focus+span { 
                width: 10px;
                height: 10px;
                display: inline-block;
                border-radius: 50%;
                border: 1px solid #f00;
            }
    
            label input:focus+span::after { 
                content: "";
                width: 6px;
                height: 6px;
                display: block;
                border-radius: 50%;
                background-color: #f00;
                margin-left: 2px;
                margin-top: 2px;
            }
        </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关美化表单元素之单选框的美化

在html的表单元素中我们可以采用下列代码生成单选框： <label> <input type="radio" name="radio" check

你的名字/ 2023年07月20日 05:35/ 0 赞/ 120 阅读

相关表单form以及表单元素

表单：指在网页中用来收集用户信息表单元素(可分为两种不同类型): (1)、是以input标签显示的表单元素 (2)、特殊的一种表单：是以语义化的标签的表单元素

た入场券/ 2023年06月21日 13:26/ 0 赞/ 135 阅读

相关美化表单元素

美化表单元素美化表单元素新的伪类常见用法美化表单元素新的伪类 1. focus 元素聚焦时的样式 i

傷城~/ 2023年02月27日 13:53/ 0 赞/ 20 阅读

相关表单元素

表单元素表单元素 input元素 select元素 textarea元素按钮元素表单状态

深碍√TFBOYSˉ_/ 2023年02月27日 13:52/ 0 赞/ 152 阅读

相关 HTML表单元素

HTML表单元素 HTML中的表单元素，可以说是整个HTML中最常用也是最重要的部分，里面包含的太多的元素，尔每一个元素中的type类型又有很多种。所以需要大家理清楚区分

向右看齐/ 2022年12月20日 11:09/ 0 赞/ 262 阅读

相关 HTML表单元素概述,HTML表单元素的简单介绍

说明：以下内容是基于w3school及饥人谷教学内容，对HTML表单元素做的简单说明。元素元素定义 HTML 表单区间，而这个区间的数据将会被提交给后台。例子：请

我不是女神ヾ/ 2022年10月10日 02:08/ 0 赞/ 320 阅读

相关 jquery响应表单验证美化插件

[下载地址][Link 1] 一组响应通过javascript验证HTML / CSS布局形式。有三个布局的形式:垂直、水平和模态。垂直模式结构标签和字段下面,水平——标签旁

灰太狼/ 2022年08月28日 09:53/ 0 赞/ 350 阅读

相关表单元素

下面介绍一些常用的表单元素 ![20150722095812593][] ![20150722095847639][] 下面是代码示例演示这些属性值得使用：

迈不过友情╰/ 2022年08月02日 13:44/ 0 赞/ 338 阅读

相关列表表格及表单美化

列表，表格与表单有序列表 <ol> <li>...</li> <li>...</li> <li>...</li> <li>

￡神魔★判官ぃ/ 2022年04月18日 04:12/ 0 赞/ 360 阅读

相关 HTML元素标签、表单元素详解

<html lang="en"> <head> <meta charset="UTF-8"> <title>网页的标题</title> </he

末蓝、/ 2022年04月18日 03:13/ 0 赞/ 654 阅读