input相关属性设置

最新推荐文章于 2023-09-16 18:16:33 发布
最新推荐文章于 2023-09-16 18:16:33 发布
阅读量381 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45587146/article/details/120017699
版权 
<!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>
    <style>
        input{
            width: 200px;
            height: 20px;
            
            /* 要点属性1：输入框输入时文字的颜色 */
            color: green;
            
            /* 要点属性2：去除聚焦时的边框 */
            outline:none;
            
            /* 要点属性3：输入框边框 */
            border: 2px solid orange; 

            /* 要点属性4：聚焦时光标颜色 */
            caret-color: violet;
        }
        
        /* 要点属性5：兼容不同浏览器placholder提示文字的颜色 */
        input::-webkit-input-placeholder { /* WebKit browsers */
            color: red; 
        }
        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: red; 
        }
        input::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: red; 
        }
        input:-ms-input-placeholder { /* Internet Explorer 10+ */
            color: red; 
        }
        /* 要点属性6：输入框聚焦时placholder文字颜色 */
        input:focus::-webkit-input-placeholder{ 
            color: blue; 
        }
    </style>
</head>
<body>
    <input type="text" placeholder="请输入内容">
  
</body>
</html>

注释：当输入框无边框且聚焦时无边框，要同时设置border：none;和outline:none;

是！豆哈哈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input输入框设置
01-17
对于设置input标签，可对input标签增加属性，自定义可输入内容，都可以通过属性进行控制，比如输入数字、小数点、汉字等
HTML5 INPUT新增属性
12-02 5847
HTML5的input标签新增了很多属性，也是让大家非常兴奋的一件事，用简单的一个属性搞定以前复杂的JS验证。input新增的这些属性，使得html和js的分工更明确了，使用起来十分舒畅。 我们先看下input新增了的属性： 新增属性一：autoconmplete autoconmplete可以赋值为 on 或者 off。当为 on的时候，浏览器能自动存储用户输入的内容。当用户返回到曾经填写
html表单input六种属性以及演示
最新发布
2301_77264434的博客
09-16 570
【代码】html表单input六种属性以及演示。
input中lang和title属性的另类用法(不知可行不)---转载一篇不错的文章
02-01 4242
在网上找到一篇关于js表单验证的代码:http://blog.yesky.com/Blog/_grace/archive/2005/01/10/62725.html[code][/code]文中在input中加入了check和warning属性,表单验证的功能是实现了,但没法通过代码的验证,我想到了把check,warning分别用lang,title来代替，这样能通过代码的验证，但不知道可行不？
HTML5之lang属性和dir属性
张波的技术积累
04-07 4139
1：lang属性用于指定元素的属性值以及元素的内容文字所用的基准语言，默认值未知，但是，是否适用与属性，还要取决于 语法和属性的语义，以及卷入的操作    用户浏览器在呈现HTML文档时，该属性的益处有以下几点：    (1) 协助搜索引擎    (2) 协助语音合成    (3) 协助选择符号异体字用于高品质的印刷    (4) 协助选择一套引号    (5) 协助解决连字符、绑定
获取input标签的所有属性的方法
09-02
`<input>`标签有许多属性，这些属性定义了输入字段的行为和外观。本篇文章将详细介绍如何获取`<input>`标签的所有属性，以及提供两种不同的实现方法。 1. **jQuery方法**： jQuery是一个流行的JavaScript库，它...
使用placeholder属性设置input文本框的提示信息
11-21
input type="search" name="user_search" placeholder="Search W3School" /> <input type="submit" /> </form> 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息（hint）。 该提示会...
禁止input文本框输入实现属性
12-10
`readonly` 属性用于设置文本框为只读状态。这意味着用户在页面上看到的内容不能被修改。当设置 `readonly` 时，文本框仍然可以获取焦点，用户可以高亮选中文字并进行复制，但无法输入新的字符。后台在提交表单时仍...
Vue动态控制input的disabled属性的方法
12-29
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 配置项 v-bind:disabled=...
Chrome — 让<input>标签支持语音搜索 x-webkit-speech
aitinuo1702的博客
10-27 173
使用Chrome浏览器且细心的骚年应该都会发现一些大的网站已经有了语音搜索功能了，例如淘宝、360搜索等等。不过只有Chorme11以上才能够支持。 实现起来非常简单，为input添加名为x-webkit-speech的属性就行了。 可以用Chrome浏览器点击话筒体验一下语音搜索。 相关属性设置： 设置语言种类：lang <inputtype="...
HTML元素的lang属性的说明及详解
刺心的博客
09-16 1万+
我在刚开始学习HTML的时候，关于基本的HTML格式中有一点不明白的地方，基本格式如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body><...
＜Input /＞输入框及input的相关属性
outstanding木槿
04-23 4376
accept属性用来规定能够通过文件上传进行提交的文件类型。type="button"、"reset"、"submit"用于定义按钮上的显示的文本。readonly属性可与type="text"或"password"的input元素配合使用。type="text"、"password"、"hidden"用于定义输入字段的初始值。type="checkbox"、"radio"、"image"用于定义与输入相关联的值。该属性只能与type="text"或type="password"的input元素配合使用。
关于input的value用法介绍
小青头的博客
07-27 4409
不同type下input的含义和用途 使用jQuery选择器获取value值的注意事项 radio checkbox option text 不同type下input的含义和用途 type类型 input用途 value值的含义 text 单行文本框 文本框中默认初始内容 password 用来输入密码的单行文本框(文...
Input属性详解
qq_48621951的博客
07-29 1万+
注意radio（单选框）需要value值相等才可以实现单选的功能，value值可以随意设。（1）当inputtype=“text”、“password”、"hidden"时，定义输入字段的初始值；（2）当inputtype=“button”、“reset”、"submit"时，定义按钮上的显示的文本；（3）当inputtype=“checkbox”、“radio”、"image"时，定义与输入相关联的值；1.name属性元素的名称，也就是name的值代表当前input元素的名字；...
前端基础input输入框主要属性
m0_58849641的博客
09-17 1万+
　1、单行输入框< input type"text"/>。单行文本的输入框常用来输入简单的信息，例如用户名、账号等等。具体的属性有：name、value、maxlength。 　　2、密码输入框<input type=”password”/>。其内容以圆点的形式显示。 　　3、但选按钮<input type-”radio”/>。单选按钮用于单项选择，在定义单选按钮时必须为同一组中的选项制定相同的name值，可以对单选按钮应用checked属性，制定默认选中项。 　　4、复
[golang]-input 长度随内容长度自动变化
爷来辣的博客
11-11 536
导语：发布时需要让用户确认一下 自己提交的参数 不允许修改。遇到一个比较长的input 无法显示所有的内容 如图 <li> 发布job模块: <input readonly type="text" name="model" value="{{.jobinfo.Model}}" /></li> 修改为 <li> 发布job模块: <inpu
html标签中的lang属性
Yang'blog
03-13 2万+
写在html标签中的lang属性作用：声明当前页面的语言类型。如： <html lang='en'></html> //英文 <html lang='zh'></html> //中文 <html lang='ja'></html> //日文 <html lang='en-us'></html> //美式英文注意：lang属性中的语言代码不区分大小写 <html lang='en-us'></html
HTML中html元素的lang属性的说明
热门推荐
mirro81的博客
07-16 5万+
HTML中html元素的lang属性的说明我在刚开始学习HTML的时候，关于基本的HTML格式中有一点不明白的地方，基本格式如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body></body> </html>究竟html标签中的lang属性是干嘛的
HTML5 中input的新属性
javababy1
11-10 299
new : HTML5 中的新属性。 属性 值 描述 accept list_of_mime_types 规定可通过文件上传控件提交的文件类型。 （仅适用于 type="file"） alt text 规定图像输入控件的替代文本。 （仅适用于 type="image"） autocomplete on off 规定其否使用输入字...
input输入框属性设置
07-17
当设置输入框的属性时，可以使用HTML中的`<input>`标签，并通过各种属性来定义其行为和外观。以下是一些常用的输入框属性： 1. `type`属性：指定输入框的类型，例如文本、密码、日期等。 ```html <input type=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值