`
Rainbow702
  • 浏览: 1076677 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类

input 输入加了 背景图片之后,防止 默认式样 发生变化的方法

阅读更多

在chrome里,对一个input输入框加了背景色之后,发现 输入框 的式样变得巨丑无比。

那有么没有办法防止呢?

有,但与其说防止,不如说如何在发变了变化之后,恢复默认的式样。

 

方法就是:

按F12打开chrome的控制台,点击一个没有加背景色的输入,将其式样(就是默认式样)获取下来,

然后把这些式样再赋值给那些你加了背景图版的输入框 。

如:

 

#loginId {
	width: 175px;
	padding-left: 25px;
	background: url('../images/login_user.png') no-repeat left center;
	background-size: 20px 100%;
	background-color: #FFFFFF;
	border-bottom: 1px inset rgb(238, 238, 238);
	border-left: 1px inset rgb(238, 238, 238);
	border-right: 1px inset rgb(238, 238, 238);
	border-top: 1px inset rgb(238, 238, 238);
}

 

以上,background-color 以下的就 chrome默认的式样。

 

分享到:
评论

相关推荐

    javascript经典特效---INPUT框中的背景图片.rar

    在JavaScript的世界里,实现输入框(INPUT)的背景图片效果是一项常见的美化网页的任务。这个"javascript经典特效---INPUT框中的背景图片.rar"压缩包文件包含了关于如何为输入框添加和控制背景图片的知识点,让我们...

    防止input框输入的javascript代码

    可以有效的阻止在hutml文档的input框中输入内容,纯手写,经检测可以顺利运行

    ios输入框(input)背景色为白色无法去除.pdf

    iOS输入框背景色为白色无法去除的问题是由于iOS高版本的输入框默认背景色为白色,且radius也继承了外面div的样式所致。在iOS中,background的transparent属性是无效的,因此在安卓中看似正常的但在iOS高版本手机中会...

    jQuery/JS监听input输入框值变化实例

    与onchange不同,oninput事件在用户输入时就会触发,即输入框的值发生变化的那一刻就会触发,非常适合需要实时反馈输入情况的场景。oninput事件在大多数现代浏览器中都得到支持,包括Firefox, Google Chrome, Opera,...

    js 特效 html 特效 INPUT框中的背景图片

    js 特效 html 特效 INPUT框中的背景图片

    input表单里加图片

    在input里加背景图片,这样更容易让别人知道此input的功能

    用JS控制INPUT输入内容

    ### 使用JavaScript控制INPUT输入内容详解 #### 一、概述 在网页开发中,为了提高用户体验并确保数据的有效性,我们经常需要对用户输入的数据进行控制和验证。通过使用JavaScript(简称JS),我们可以轻松地实现这...

    很漂亮又实用的的Input框,支持CSS或者图片两种样式。

    在网页设计中,输入框(Input框)是用户与网站交互的重要元素,它允许用户输入数据。本资源提供了一种既美观又实用的输入框设计方法,支持通过CSS样式或图片来定制其外观,从而提升网页的用户体验和视觉吸引力。 ...

    input file上传图片预览

    在前端开发中,"input file上传图片预览"是一个常见的需求,它允许用户选择本地的图像文件,并在上传前提供预览。这个功能在许多网站和应用中都很实用,例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...

    input只能输入数字英文字母汉字

    当用户在输入框中输入文本时,可以监听`onkeyup`事件或`onbeforepaste`事件,并在这些事件发生时执行相应的处理函数来过滤非法字符。 #### 2. 示例代码分析 **示例1:仅允许数字** ```html <input onkeyup="this....

    flex解决textarea,input不能输入中文的方法

    ### flex解决textarea,input不能输入中文的方法 在使用Flex进行Web应用开发时,有时会遇到一个让人头疼的问题:在非主应用程序环境下(例如嵌入到HTML页面中的SWF文件),textarea和input控件无法正常输入中文字符...

    input输入款点击小眼睛显示或隐藏密码

    `type="password"`属性确保在浏览器中默认显示为星号或圆点,隐藏实际输入的字符。 ```html <input type="password" id="passwordInput" placeholder="请输入密码"> ``` 接下来,我们创建一个小眼睛图标,作为显示...

    javascript方法:input只能输入数字和字母

    javascript 是一种web开发重要工具! 这个方法可以让你实现:input只能输入数字和字母

    js input 密码只能输入数字或字母

    在JavaScript(JS)中,为实现输入框(input)只允许用户输入数字或字母的功能,我们需要对用户的输入进行实时验证。这种需求在很多Web应用中都常见,比如注册、登录页面的密码输入。以下是一个详细的方法来实现这个...

    input框只能输入数字和一个小数点

    其中,`type="number"`可以限制用户输入为数字,但默认情况下它允许输入负数和小数。为了完全符合题目要求,即仅限于非负数,并确保小数点的唯一性,通常需要额外的JavaScript代码来实现更精确的控制。 ### 知识点...

    JS控制 input 输入字符限制

    在JavaScript中,对`input`元素的输入进行字符限制是一种常见的前端验证技术,它能确保用户输入的数据符合特定格式或规则,从而提高数据质量和用户体验。本文将深入探讨如何使用JavaScript和正则表达式来实现这一...

    JavaScript Input 输入验证

    javaScript Input输入限制集合,直接引用就可以使用,以后会慢慢继承再其中,感谢下载体验

    Linux中Input输入子系统分析.pdf

    Linux 中 Input 输入子系统分析 Linux 操作系统中的 Input 输入子系统是一个非常重要的组件,它负责处理各种输入设备的事件,例如键盘、鼠标、触摸屏等。Input 子系统是一个多层次结构,主要分为三层:Input driver...

    Directx Input输入库实现

    DirectX Input输入库是微软DirectX API的一部分,主要用于游戏开发和其他对实时用户输入有高要求的应用程序。这个库提供了一种高效的方式,让开发者能够直接访问硬件设备,如键盘、鼠标、游戏手柄等,获取精确到单帧...

    html文本框input表单输入框默认提示信息插件,获得焦点自动清空默认值,失去焦点对比确认默认值

    当input失去焦点时 会判断输入值与默认值是否一致 如果一致(或空)则再次显示默认提示信息 若不一致(已输入信息)则input值为所输入值 3 此插件是jquery插件 调用方式为 $ "#xxx" autoTip ; 并可以指定...

Global site tag (gtag.js) - Google Analytics