当前位置:首页 > 前端技术 > 如何设定和改变html输入框控件的背景颜色

如何设定和改变html输入框控件的背景颜色

2022年09月17日 19:49:16前端技术9

在操作页面时,有时我们需要设定或改变输入控件,如:<input type="text">控件。

1、当需要在设置其背景颜色时可以使用style="background:'color'",例如,我们要定义一个背景色为浅蓝色的输入控件:

<input type="text" id="demo" name="demo" style="background:'#D1EEEE'">

2、当我们需要在在鼠标移动到输入控件上时,改变其背景颜色,我们可以在js函数中使用obj.style.backgroundColor = "color";语句实现,先定义如下js函数:

    function changeColor(obj, color) {

        obj.style.backgroundColor = color;

}

然后再在输入控件中加入事件:

<input type="text" id="demo" name="demo" style="background:'#F2F2F2'" onMouseOver="changeColor(this, 'RED')" onMouseOut="changeColor(this, 'LightBlue')">

上面的定义表示,输入控件背景色默认是灰色,当鼠标移动到控件上时,颜色变为红色;当鼠标移出控件时,颜色变为浅蓝色。

3、如果是table表格,可以在<tr>或<td>中使用bgColor="color"属性来设定默认颜色。如果要改变其颜色,可以在js函数中可以直接使用obj.bgColor = color;然后在<tr>或<td>中加入事件。

作者:Just for fun! :-)
来源链接:https://blog.csdn.net/u013455166/article/details/104299440

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42781.html

分享给朋友:

“如何设定和改变html输入框控件的背景颜色” 的相关文章

Markdown中使用html标签

有时候,我们会在笔记中使用一些HTML标签,但是Markdown中直接使用html标签会被解析为格式.该怎么书写,可以直接显示为html的标签呢. <h1>这是一个标题</h1> //其中的<h1&g...

HTML之框架结构标签的简单使用

框架标签的简单使用 框架: 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面,简而言之,就是在一个窗口中显示多个页面。 每个页面称之为一个框架。并且每个框架独立于其他的框架。 使用...

v-html 解析并插入 html 标签

v-html 解析并插入 html 标签

1. 双大括号会将数据解释为普通文本,而非 HTML 代码。 <div id="app"> <p id="a">Using mustaches: { { rawHtml }}</p> <p >Using v-ht...

HTML 5 video 视频标签全属性详解

现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从技术层面...

HTML5 video 视频标签使用介绍

HTML <video> 适用于HTML 5+,用于定义在线观看的视频流媒体。 <video width="320" height="240" src="movie.ogg" controls="controls"> 这里是注释文字,如果无法...

标签添加不可用属性

1. 简单设置a标签的disabled属性就可以阻止事件(onclick)还有href吗? 锚标签本身不支持disabled,所以简单设置了disabled属性是没有任何效果的 2. 如何阻止href? 首先看一下 关于a标签的oncli...

HTML标签大全(常用)

转自:https://www.cnblogs.com/moije/p/6751624.html 文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。 HTM...

HTML笔记及案例(全)

HTML笔记及案例(全)

一、 HTML简介 1.HTML是什么? HTML: HYper Text language超文本 标记(标签)语言有多种标签组成,用来制作网页,告浏览器该如何显示页面 2.HTML语言作用? 制作网页,控制网页、内容的显示 插入图片、音乐、视频、...

HTML隐藏属性的使用

1、disabled。HTML input 标签有一个 disabled 属性,该属性规定是否禁用 input 元素,被禁用的 input 元素既不可用,也不可点击,值为“disabled”。如果要启用该 input 元素,可通过 JavaScript 来删除 disabled...

HTML关于border属性的一点小领悟

HTML关于border属性的一点小领悟

在写HTML的时候我们经常会想变换border的颜色或者风格。大多数时候我们是这样做的。 我们为这里的li设置了一个border,然后我们现在想改变border-bottom的颜色。通常我们会有两种做法: 左侧截图中的方法能够改变border-...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。