Ant Design 的 Input 输入框组件在获取焦点时会有蓝色的边框，尝试用 outline:none 去掉这个边框，但是发现不管用。...最终通过 F12 调试发现 Ant Design 的 Input 组件在获取焦点时蓝色边框是通过 box-shadow 来实现的。... .ant-input:focus { border: none; box-shadow: none; } 上面的方法把 border 边框也去掉了，如果需要显示边框，可以通过自定义边框颜色来实现...修改 Textarea 聚焦的默认边框： textarea,textarea.ant-input:hover,textarea:focus{ border: 1px solid #DAE2F3;... -webkit-box-shadow: none; box-shadow: none; } 声明：本文由w3h5原创，转载请注明出处：《如何去掉antd中Input、Textarea组件获取焦点时的蓝色边框
之前在折腾主题的时候发现一个很怪的现象，在Chrome浏览器下，输入框有一个黄色的边框；而在其它WebKit浏览器（如Jeff使用的傲游浏览器）下，输入框的颜色是蓝色的（见下面的图片）。...input和textarea的黄色/蓝色边框问题图示 ? ? ? ? input和textarea的黄色/蓝色边框问题的原因与解决方法 由于不同浏览器对outline这个css属性默认情况不同所致。...解决方法是定义outline属性为none，即将下面的css代码加入相对应的选择器中。 input,textarea{outline:none;} 或者加入到css重置中一劳永逸。...关于outline属性（来源于w3school） outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 注释：轮廓线不会占据空间，也不一定是矩形。
:placeholder-shown CSS 伪类 在 input> 或 textarea> 元素显示 placeholder text 时生效，简单的说就是 placeholder 有值才生效，如下所示...如果 placeholder 为空 placeholder-show 就没效果了： // html input placeholder="" /> textarea placeholder=" text...:placeholder-shown vs :empty :placeholder-shown是专门用于确定元素是否显示占位符的对象，我们主要使用它来检查input 内容是否为空（假设所有的input都有一个占位符...类似于类选择器（即.form-input）比类型选择器（即input）具有更高的权重。 高权限选择器将始终覆盖低权重设置的样式。 所以我们可以这样说：不要使用:empty检查输入元素是否为空。...如果检查 input 内容是否为空（在没有点位符的情况下）？ 我们检查输入是否为空的唯一方法是使用:placeholder-shown。但是如果我们的输入元素没有占位符会发生什么呢?
image 标记语言，是一种将文本以及与文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。 HTML，为超文本标记语言。...onunload，在用户从页面离开时触发，如单击跳转，页面重载，关闭浏览器窗口等。 Form表单事件 onblur，当元素失去焦点时触发。 onchange，在元素的元素值被改变时触发。...onfocus，在元素获得焦点时触发。 onreset，当表单中的重载按钮被点击时触发。 onselect，在元素中文本被选中后触发。 onsubmit，在提交表单时触发。...onmouseover，当鼠标指针移动到元素上时触发。 onmouseup，当在元素上释放鼠标按钮时触发。 Media媒体事件 onabort，当退出媒体播放器时触发。...空元素 frame属性 属性 说明 src 需要显示的html文档 frameborder 定义框架的外边框，属性值为0或者1 scrolling 定义是否显示滚动条,有3个值：
-- input 标签 当type=”submit“时 为提交按钮 value： 按钮上显示的文本 作用：具有提交功能 --> input type="reset" value="取消"/> <!...-- input 标签 当type=”reset“时 为重置按钮 value： 按钮上显示的文本 作用：具有重置的功能。...-- input 标签 当type=”button“时 为普通按钮 value： 按钮上显示的文本 作用：不具有任何功能的普通按钮。...-- input 标签 当type=”submit“时 为提交按钮 value： 按钮上显示的文本 作用：具有提交功能 --> input type="reset" value="取消"/> <!...-- input 标签 当type=”button“时 为普通按钮 value： 按钮上显示的文本 作用：不具有任何功能的普通按钮。
支持accesskey属性的元素有, , , input>, , , textarea>。...onunload，在用户从页面离开时触发，如单击跳转，页面重载，关闭浏览器窗口等。 Form表单事件 onblur，当元素失去焦点时触发。...onchange，在元素的元素值被改变时触发。 onfocus，在元素获得焦点时触发。 onreset，当表单中的重载按钮被点击时触发。...Media媒体事件 onabort，当退出媒体播放器时触发。 onwaiting，当媒体已停止播放但打算继续播放时触发。 HTML元素 一个HTML文档包含的标签 空元素 frame属性 属性 说明 src 需要显示的html文档 frameborder 定义框架的外边框，属性值为0或者1 scrolling 定义是否显示滚动条,有3
div将模块进行分块，每一个都是div块 ? ...td>第一列 第二列 第二列 用css将表格设置表格边框...src = "myimage.gif" alt = "My Image" title = "My Image" /> src图片路径 alt指定图像的描述性文本，当图像不可见时...textarea> 单选框，复选框让用户选择 input type="radio/checkbox" value="值" name...就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上 男 input type="radio" name
通过本章将学习如下表单以及表格相关样式属性，您可以改变表单(input、form)或者(table)表格的样式等。...border-radius 属性 - 设置外边框圆角 描述: 此 border-radius 属性允许你设置元素的外边框圆角，当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆，此（椭）圆与边框的交集形成圆角效果... 示例2.将表格元素的 visibility 属性 设置为 collapse 使之不可见。...语法示例 /* 用法一：明确指定宽度值 */ /* 当给定一个宽度时，该宽度作用于选定元素的所有边框 */ border-width: 5px; /* 当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边...*/ border-width: 2px 1.5em; /* 当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边 */ border-width: 1px 2em 1.5cm; /*
： （建议：/和前面的标签名之间空一格） 手动闭合标签 html元素中大多数标签都是需要我们手动闭合的。..."" /> input type="text" value="" placeholder="这里是提示文字" />value代表此文本框中显示的值,placeholder设置的值表示当value为空时...value="female" name="gender" /> 女 value:在界面上不会显示出来； checked:如果存在，则表示默认选中；name： 当多个input type="radio...textarea> textarea> 标签定义多行的文本输入控件,上面介绍的input type="text">是单行文本框。...就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 标签的 for 属性应当与相关元素的 id 属性相同。 ? Paste_Image.png ?
* 如：文本，图片，音频、视频, HTML,CSS,JavaScript * 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。...* 链接标签 【文本或图像】 ⚪ href：用于指定链接目标的url地址，当为标签应用href属性时...⚪ target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。...通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。...* autofocus input type="text" autofocus> 规定当页面加载时 input 元素应该自动获得焦点 * multiple
href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。 ... 表格属性 属性 内容 说明 border 像素 表格边框宽度 cellspacing 像素 单元格边框之间的间距 cellpadding 像素 单元格内容与边框的间距 width 像素...label 用于绑定一个表单元素, 当点击 label 标签的时候, 被绑定的表单元素就会获得输入焦点，for 属性规定 label 与哪个表单元素绑定 Maletextarea 需要输入大量的信息，就需要用到 textarea 标签。...通过 textarea 控件可以轻松地创建多行文本输入框 textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 textarea> ?
"" /> input type="text" value="" placeholder="这里是提示文字" /> value代表此文本框中显示的值,placeholder设置的值表示当value为空时...name="gender" /> 女 value:在界面上不会显示出来； checked:如果存在，则表示默认选中； name： 当多个input type="radio" />的name属性值相同时...textarea>textarea> 标签定义多行的文本输入控件,上面介绍的input type="text">是单行文本框。...就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 标签的 for 属性应当与相关元素的 id 属性相同。 ? ?...form标签 标签用于为用户输入创建 HTML 表单，在页面中用户看不到form元素的显示效果。 表单能够包含 input 、label、button、select等等元素。
今天主要提到的标签有；label、文本框和密码框input、文本域。本文最早的版本也是在2013年8月时书写的，随着行业的变化，针对本篇文章也进行了内容的调整，调整时间2015年08月05日。...本篇博文当中主要内容 1、label的作用 2、如何处理input文本框|密码框的样式 3、多行文本域textarea样式的处理 label的作用 label的存在意义有二，其一在于用户体验的考虑，其二则是在处理表单元素的样式时...需要注意的是，在书写label时，如果想实现点击label区域，对应表单元素聚焦，需要为label设置for，而label中的for会配合input中的id（即label中的for的属性值和input中的...为了处理不同浏览器的不同样式（不同浏览器的input框，边框不同，背景也不相同），需要将文本框的背景去除掉，并去除它的边框，将背景设置为图片。...今天样式主要提及了label标签的意义和作用、input文本框|密码框的样式处理以及textarea的拖拽功能，下一篇文章里将继续讲解如何处理select、checkbox类型的表单元素样式。
：为每个输入字段提供描述。 input>：用于输入单行文本（如姓名和电子邮件）。 textarea>：用于输入多行文本（如消息）。 ...input> 和 textarea> 元素用于接收用户输入，且都设置了 required 属性，确保用户必填这些字段。 元素用于提交表单。...[type="text"], input[type="email"], textarea { width: 100%; /* 输入框和文本区域宽度充满父容器 */ padding: 10px...向服务器发送表单数据 当用户填写完表单并点击提交按钮后，表单数据将通过 POST 方法被发送到指定的 URL（在本例中为 /submit）。...当服务器启动时，它将在控制台输出一条消息。
telephone=no" /> 4、忽略 Android 平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 5、当网站添加到主屏幕快速启动方式...-- ios7.0版本以后，safari上已看不到效果 --> 6、将网站添加到主屏幕快速启动方式，仅针对 ios 的 safari 顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style...} 5、去除 android a/button/input 标签被点击时产生的边框 & 去除 ios a 标签被点击时产生的半透明灰色背景 a,button,input { -webkit-tap-highlight-color...,input, textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline...相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
6、表格标题 1 2 3 4 5 注意：将 td 改为 th 特点：标题的文字自动加粗水平居中对齐 7、边框颜色...table 的背景设置为边框的颜色，然后填充表格为其他的颜色，设置边框距边框的距离 cellpadding 为0，单元格与单元格之间的距离 cellspacing 为细线边框的宽度，最后看到的细线边框其实是背景颜色...输入的是文本内容 name：输入框的名字 maxlength：限定输入文本长度 readonly：文本框只读 disabled：文本框未激活 value：输入框中的默认内容 placeholder：引导文字，当文本框无文字并且未获取鼠标焦点时显示引导文字...，当获取焦点或者输入文字时隐藏引导文字。...PS：当有多个单选框是如何设置只能有一个被选中？ 只有将 name 的值设置相同的时候，才能实现单选效果。
（box-shadow） 颜色属性（Color） 透明度（opacity） 边框属性（Border） 设置元素所有四个侧面的边框颜色（border-color） 设置元素所有四个侧面的边框宽度（border-width...这样当对应组件点击添加到画布时，对应就会commit一个mutation来修改store中的componentData。 这里组件列表底层渲染也是用的组件库，只是不同模板的props不同。...最常见的有 textarea、input、select 等。 4、error：属性校验信息。当用户输入了不合法的或者类型不匹配时，可给予适当的错误提示信息。...我们先来看一下字符串（String）、数字(Number)、布尔(Boolean)和日期（Date）可能渲染的方式： 字符串（String） 渲染器类型 组件 input textarea 数字(...对象和数组属于较复杂的类型，不过我们可以把它抽象为多层级（可以理解为嵌套）的基础数据类型： 渲染器类型 组件 array 像数组一般是用下拉框的形式来展现。
String类型，输入框为空时显示的文本 placeholder-style：String类型，指定 placeholder 的样式 placeholder-class：String类型，指定 placeholder...处理函数可以直接 return 一个字符串，将替换输入框的内容 bindfocus ：EventHandle类型，输入框获得焦点时触发，event.detail = {value: value} bindblur..." placeholder="将进行转义" /> input style="margin-top:20px" bindinput="bindHideKeyboard" placeholder...value：String类型，输入框的内容 placeholder：String类型，输入框为空时显示的文本 placeholder-style：String类型，指定 placeholder 的样式...：Number类型，默认值是140，最大输入长度，设置为0的时候不限制最大长度 auto-focus：Boolean类型，默认值是false，用于自动聚焦，当获得焦点后，自动弹出软键盘，当前页面中只能有一个
"，表示没有边框 cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素（即文字与左边框的距离） cellspacing 像素值 规定单元格之间的空白，默认2像素 width 像素值或百分比...规定表格的宽度 表格结构标签 表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部 和 表格主体 两大部分....合并单元格 合并单元格的方式： 跨行合并： rowspan="合并单元格的个数" 最上侧单元格为目标单元格, 写合并代码 跨列合并： colspan="合并单元格的个数" 最左侧单元格为目标单元格... 标签用于绑定一个表单元素, 当点击 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验....元素 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表。
用文字显示】 title 提示文本【鼠标停放在图片上时，会有文本显示】 width 设定图片宽度 height 设定图片高度 border 设定边框（黑色） 5.1 相对路径 1、同一路径：..._blank，新窗口打开页面 2.内部链接：网站内部页面之间的相互链接 公司简介 3.空链接...height="249"> 属性名 属性值 描述 align left（左）、center（中）、right（右） 对齐方式【整个table标签的】 border 1 或 "" 默认没有边框...-- 单选按钮和复选框可以设置checked 属性，当页面打开时候就可以默认选中这个按钮 --> 性别: 男 input type="radio" name="sex" checked...文本域【可输入多行文本】 textarea name="" id="" cols="50" rows="5">请输入文字textarea> 【cols：显示行数、rows：每行字符数
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
