css-去除input框里面的默认背景颜色

最新推荐文章于 2024-08-22 16:10:15 发布
最新推荐文章于 2024-08-22 16:10:15 发布
阅读量5.5k 收藏 5
点赞数 5
分类专栏： 前端开发 # Css/Css3 文章标签： css 去除input默认背景颜色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mossbaoo/article/details/112388359
版权

input输入框在浏览器里面会有输入历史记录的功能，当你选择输入记录的时候，输入框会出现蓝色的背景颜色

这时候需要用css处理一下：

input{
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}

具体颜色可按需求调整

mossbaoo
关注
专栏目录
去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景
09-25
本文主要关注的是如何在谷歌浏览器（Chrome）中处理`input`和`textarea`元素的焦点状态，包括移除默认边框、背景以及禁用文本区域的大小调整功能。 首先，关于`input`和`textarea`的焦点边框，Chrome浏览器会为获得...
element-plus 取消el-input输入框的背景色
bigbigpigsobig的博客
10-07 805
【代码】element-plus 取消el-input输入框的背景色。
去除input选中时出现的蓝框
热门推荐
GTraveler
07-20 1万+
由于不同浏览器对outline这个css属性默认情况不同,造成在不同的浏览器上出现一些不同。解决方法是定义outline属性为none，如下：input{outline:none;}outline 属性(参考w3school) outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 注释：轮廓线不会占据空间，也不一定是矩形。 outline 简写
CSS属性-背景属性
最新发布
qq_72013756的博客
08-22 1689
从零开始学前端
去除input自动填充时的背景色
xxitcef的博客
06-23 5868
我想应该做过登录的页面的同学都遇到过这样的问题,input的自动填充功能会带有背景色，这样会影响美观，如下图 要想去掉这个背景色有两种方法： 1.给input设置属性autocomplete=“off”，意为关闭自动填充，不记录之前输入过的值。完全可以解决背景色的问题，但是没有自动填充功能体验相对来说不是很友好 2.通过css样式： <style lang="less"> input:-webkit-autofill { box-shadow:0 0 0 1000px white
input输入框自动填充后消除背景色
08-15 1468
【代码】input输入框自动填充后消除背景色。
CSS去掉input框里面的默认背景颜色
xiamoziqian的博客
12-03 6827
在写代码的时候，有时候会遇到一些默认的颜色，比如input框在谷歌浏览器里面会出现黄色的背景默认的颜色，这是因为input输入框记忆功能导致背景变成蓝色，这个时候就需要用css代码属性来处理一下。 谷歌浏览器 在css代码里面添加，阴影覆盖即可 -webkit-box-shadow: 0 0 0 1000px white inset; ...
清除input自动填充背景色
cdd9527的博客
12-20 2038
清除input自动填充背景色
详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）
12-14
本篇文章将详细讲解如何去除`input`输入框在Android和iOS设备上的默认白色背景和边框，从而实现更加美观、协调的界面效果。 首先，问题的起因在于开发者在创建一个订单查询功能时，使用了`<input type="date">`标签...
IE6/7下多种方法移除button、input 默认边框和去掉焦点线
12-11
一、去掉边框： ...通常解决这样的bug最好的方法就是在button和input的标签外添加一个标签，然后将样式写在这个标签上，并且把button和input的默认样式都去除掉。 实现方式一：设置CSS： 复制代码
html5中去掉input type date默认样式的方法
09-22
默认情况下，这个控件会有一套浏览器自定义的样式，但有时候为了网站或应用的整体风格一致性，开发者需要去掉或修改这些默认样式。下面是去除或修改HTML5中input type="date"默认样式的方法。 首先，需要了解的是，...
去除input表单出现的蓝色边框轮廓
weixin_42583802的博客
03-29 549
html <input type="text"> css中添加代码就可消除 outline: none;
CSS去掉input框里面的默认字体颜色
祈澈菇凉
08-13 2576
写登录界面的时候，需要的效果是这样的： 但是经过测试之后，发现浏览器记住密码之后，输入框字体颜色发生改变,变成了黑色，很影响美观。 这是由于谷歌浏览器的自带样式的缘故：那么该怎么解决谷歌浏览器记住密码输入框字体颜色改变? input:-webkit-autofill, textarea:-webkit-autofill, s...
ant-design的Input输入框取消选择后的蓝色背景以及如何取消提示
owo_ovo的博客
08-22 1542
ant-design的Input输入框记录了之前的值，在focus后展示可选提示框，选择后会出现蓝色背景。如何将该背景取消，以及如何不再弹出可选提示框。
关于input输入框自动填充密码后，出现背景颜色的问题解决
冰魂魄的博客
04-11 2179
inpuy自动填充密码时，点击密码会出现一个淡色的背景颜色
选中input是点击历史记录填充值时背景改变的问题
sepier的博客
12-11 1587
当我们在填写用户名或者电话之类的input框的时候，总会有以前提交过的一些历史记录让我们填充使用，但是当我们点击了历史记录自动填充到文本框的时候发现原来的文本框的背景颜色改变了，而且出现和界面不搭的问题。 通过编辑器检查发现如下代码改变了我们input的css： input:-internal-autofill-selected { appearance: menulist-button; background-image: none !important; background-
去掉密码输入框背景色方法
qq_30119705的博客
12-06 390
去掉密码输入框背景色方法 替换：Ctrl/Command + G 合理的创建标题，有助于目录的生成 直接输入1次#，并按下space后，将生成1级标题。 输入2次#，并按下space后，将生成2级标题。 以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。 如何改变文本的样式 强调文本 强调文本 加粗文本 加粗文本 标记文本 删除文本 引用文本 H2O is是液体。 210 ...
el-input背景设置为透明色
你的小可爱的博客~
05-30 2116
【代码】el-input背景设置为透明色。
html改变复选框颜色,如何利用纯CSS改变html？radio/checkbox默认背景颜色样式
06-09
可以使用伪类选择器来改变复选框和单选框的样式。以下是一个示例代码，可以改变复选框和单选框的选中和未选中状态的背景颜色： ```css /* 未选中状态 */ input[type="checkbox"]:not(:checked), input[type="radio"]:not(:checked) { background-color: #fff; /* 未选中状态背景色 */ } /* 选中状态 */ input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: #007bff; /* 选中状态背景色 */ } /* 外观样式 */ input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; /* 去掉默认样式 */ -moz-appearance: none; appearance: none; width: 20px; /* 设置宽高 */ height: 20px; border: 1px solid #ccc; /* 设置边框 */ border-radius: 3px; /* 设置圆角 */ outline: none; /* 去掉聚焦时的虚线 */ transition: all 0.3s ease-in-out; /* 添加过渡效果 */ } /* 鼠标悬停状态 */ input[type="checkbox"]:hover:not(:checked), input[type="radio"]:hover:not(:checked) { border-color: #007bff; /* 鼠标悬停时边框颜色 */ } /* 选中状态下的图标 */ input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { content: "\2713"; /* 使用 Unicode 符号作为图标 */ display: block; text-align: center; color: #fff; line-height: 20px; } ``` 你可以根据自己的需求修改这个样式代码，以实现不同的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mossbaoo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值