INPUT[type=text/password] 元素样式设置

最新推荐文章于 2023-04-02 17:49:57 发布
最新推荐文章于 2023-04-02 17:49:57 发布
阅读量3.6k 收藏
点赞数
文章标签： input 浏览器 css

不要试图通过设置 "size" 属性使 INPUT[type=text/password] 元素在所有浏览器中的宽度一致，这是不可能的。在需要对这类元素做精确的控制时，应使用 CSS 的 'width' 和 'height' 特性。

另外不同浏览器的默认字体的区别会导致文本框内文字表现的差异，最好为 INPUT 元素显式设置字体样式覆盖其默认值，以保证文本框在所有浏览器中有相同的呈现效果。

kong0609
关注
Vue input密码输入框自定义密码眼睛icon
qq_37635012的博客
04-07 571
【代码】Vue input密码输入框自定义密码眼睛icon。
使用text类型的文本输入框模拟password类型的密码输入框
小鹿不在林间的博客
02-24 4155
项目开发中要求不能使用password类型的密码输入框该怎么做？ 最近有个项目，在做登录模块时，要求不让使用password类型的密码输入框，是为了防止报安全问题，因为password类型的密码输入框，容易被浏览器记住密码，很不安全。我在网上找了几种方法，效果也都不尽人意，那么在密码输入这一块，大家都是怎么做的呢？ 在网上找了好几种方法，效果也都不尽人意... 1.动态切换type类型（会报安全问题） 初始时将输入框type类型设置为text，当文本框聚焦时，将type类型改为password，失去
input密码框圆点和提示字样式设置
热门推荐
webdongchao的博客
08-04 1万+
修改密码框内容样式 css input[type="password"] { letter-spacing: 5px; font-size: 20px; } input[type="password"]::-webkit-input-placeholder { letter-spacing: 0; font-size: 14px; } input[type="passw...
HTML元素 - input type=password
杨光的技术收集站
08-23 1141
定义 创建与 INPUT type=text 控件类似的单行文本输入控件，不过并不显示用户输入的内容。 Creates a single-line text entry control similar to the INPUT type=text control, except that text is not displayed as the user enters it. 注
type的password属性的更改~
weixin_34391445的博客
06-07 318
有时候password也需要一个占位符，可是由于IE浏览器是只读的，没有办法去更改，这个时候又没有办法去做，那怎么办呢。。。只好多写一个input，，显示隐藏 来源网络~ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><...
css 更改text样式,JavaScript 中用 cssText 设置 CSS 样式
weixin_30468419的博客
08-03 417
如果网页中一个 id 为“id1”的标签；想要在JavaScript 中设置这个元素的 CSS 样式，很一般的做法是：var obj = document.getElementById("id1");obj.style.width = "400px";obj.style.height = "300px";如果要设置一堆又一堆的 CSS 样式呢，太麻烦了吧。一般情况下都会结合 CSS 来添加 c...
将以下页面进行渲染，使其页面更漂亮 <form action="login_11.jsp" method="post" > Username<input type="text" name="name"/></br> password<input type="text" name="password"/></br> code<input type="text" name="code"/><img src="code.jsp" width="100" height="20" /></br> <input type="submit" value="Submit" /> </form>
06-07
input[type="text"], input[type="password"]{ padding: 10px; border-radius: 5px; border: 1px solid #CCCCCC; width: 100%; margin-bottom: 20px; box-sizing: border-box; } input[type...
.login-container input[type="text"], .login-container input[type="password"] {
最新发布
09-09
这段代码是CSS（层叠样式表）选择器的一部分，用于选择.login-container类下的所有类型为"text"的input元素和所有类型为"password"的input元素。具体来说，它用于对登录页面容器（.login-container）内的文本输入框...
<form action="/login" method="post"> <div class="login_box"> <input type="text" name="username" id="username" required> <label for="username">用户名</label> </div> <div class="login_box"> <input type="password" name="password" id="password" required> <label for="password">密码</label> </div> <button type="submit" id="login-btn">登录</button> </form> <a href="register.html"> 注册 <span></span> <span></span> <span></span> <span></span>优化代码，让form表单里的button和注册按钮样式一样
07-14
<input type="text" name="username" id="username" required> <label for="username">用户名</label> </div> <div class="login_box"> <input type="password" name="password" id="password" required> ...
请把一下代码每一行的用途注释上：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>登录表单</title> <style> body { background-image: url("background.jpg"); background-size: cover; font-family: "宋体"; font-size: 30px; } form { margin: auto; width: 50%; background-color: rgba(255,255,255,0.8); padding: 20px; border-radius: 10px; } input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit], input[type=reset] { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover, input[type=reset]:hover { background-color: #45a049; } .error { color: red; } </style> </head> <body> <form> <h2>登录</h2> <label for="username">用户名</label> <input type="text" id="username" name="username" ><br> <label for="password">密码</label> <input type="password" id="password" name="password" ><br> <label for="confirm_password">确认密码</label> <input type="password" id="confirm_password" name="confirm_password" ><br> <input type="submit" value="登录"> <input type="reset" value="重置"> <span class="error" id="password_error"></span><br> <a href="https://www.baidu.com/">忘记密码？</a> </form> <script> document.querySelector("form").addEventListener("submit", function(event) { var password = document.querySelector("#password").value; var confirm_password = document.querySelector("#confirm_password").value; if (password != confirm_password) { document.querySelector("#password_error").innerHTML = "密码不一致"; event.preventDefault(); } }); </script> </body> </html>
05-24
input[type=text], input[type=password] { // 定义文本输入框和密码输入框的样式 width: 100%; // 宽度为父元素的 100% padding: 12px 20px; // 内边距为 12px 和 20px margin: 8px 0; // 外边距为 8px ...
CSS样式
Good_omen的博客
06-20 147
HTML 1. 概念：是最基础的网页开发语言 * Hyper Text Markup Language 超文本标记语言 * 超文本: * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本. * 标记语言: * 由标签构成的语言。<标签名称> 如 html，xml * 标记语言不是编程语言 2. 快速入门： * 语法： 1. html文档后缀名 .html 或者 .htm 2. 标签分为 1. 围堵标签：有开始
js修改input placehold文本样式
lz的博客
07-11 1396
html <input class="user_name" type="text" placeholder="placeholder文本样式" /> css <style> .inputChange::-webkit-input-placeholder { font-size: 30px; text-align: left; ...
解决input设置密码属性后导致的input样式失效问题
榕城候佳人的博客
04-02 557
大概原因就是浏览器有自动保存密码的功能。为了解决这个问题也很简单，我们只用在css最顶端加上这段代码。这样即使自动保存密码也不影响我们的样式（下面就显示了我之前设置的密码）问题描述：input设置密码属性后导致input设置的所有样式失效。在设计登录页面时，遇到一个之前没遇见的问题，这里记录一下。但是当我在密码输入框设置密码属性后（如下）首先我对登录部分的盒子设置了如下属性。这样按道理可以实现下面的效果。
input标签选中样式设置及input密码框可视设置
start_sea的博客
07-31 1万+
input标签选中样式设置及input密码框可视设置 关于input标签样式使用的一些总结： 1、input标签选中时的光标紧贴边框的问题： input标签默认光标会紧贴边框，设置padding样式可解决； 2、input标签选中样式： input标签可对选中时的样式进行设置，同时要注意input标签外边框和内边框的影响。可通过box-shadow属性设置选中时的边框阴影。 3、input标签的type属性： input标签的type属性有多个属性值：button、checkbox、file、hidden
[ElementUI] 修改ElementUI默认样式
qq_43186285的博客
02-23 6010
前言: 在使用ElementUI中免不了要根据自身需求修改EleUI的默认样式; <div class="form-box"> <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid"></el-input> <el-input v-model="form.password" placeholder="请输入密码" prefix-
模拟input 密码框效果 （中文输入法处理）
qq_31620497的博客
05-21 1223
inputPwd: (function () { var map = {}; function inputPwd(el) { // var $el = $(el); // var key = $el.attr('input-pwd'); // map[key] = $el; this.el = el; this.initInput(); }.
js-仿京东显示隐藏密码
qq_41670147的博客
11-21 1125
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
关于input type设置password出现黄色背景和默认内容
yakelande的博客
03-15 2917
只要设置了type为password就会出现黄色的背景和默认的内容。点击password框会出现使用以下项的密码,有没有觉得很丑，这是谷歌浏览器默认的行为，input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { box-shadow:0 0 0 60px white inset;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值