input div 等控件变色

JenniferMuMu

2014-09-17

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>FireFox / Mozilla / Opera / IE 适用</title>
<style type="text/css" by tesion.>
/* CSS v.02 by tesion. 
CopyRight: http://www.netjoin.net
Contact: [email protected]
原创表单变色
*/
/*定义全局样式 */
input,select,textarea,div	{
	font: 12px Arial
	/* 此部分为表单和容器的字体定义 */
	}
/* 所有表单定义默认 */
input,select,textarea	{
	border: 1px solid #EFEFEF;
	}
/* 利用鼠标事件 :hover 来定义当鼠标经过时样式 */
input:hover,select:hover,textarea:hover	{
	background: #F0F9FB;
	border: 1px solid #1D95C7;
	}
/* 由于 :hover 事件只有 Mozilla 支持，因此为方便IE使用 expression 批量定义 */
input.input,select,textarea {
	tesion:expression(onmouseover=function() 
	{this.style.backgroundColor="#F0F9FB";this.style.border="1px solid #1D95C7"}, 
	onmouseout=function()
	{this.style.backgroundColor="#FFFFFF";this.style.border="1px solid #EFEFEF"})
	}
/* 如上 */
div	{
	background: #EFEFEF;
	padding: 10px; /* 填充 */
	cursor: pointer /* 鼠标 */
	}
div:hover	{
	background: #F0F9FB
	}
div {
	tesion:expression(onmouseover=function() 
	{this.style.backgroundColor="#F0F9FB"}, 
	onmouseout=function()
	{this.style.backgroundColor="#EFEFEF"})
	} 
/* 不错吧？ */
</style>
</head>
<body>
<p>
  <input type="text" class="input" size="20" maxlength="16" />
  <input type="text" class="input" size="20" maxlength="16" />
  <input type="text" class="input" size="20" maxlength="16" />
  <input type="text" class="input" size="20" maxlength="16" />
  <input type="text" class="input" size="20" maxlength="16" />
  <input type="text" class="input" size="20" maxlength="16" />
  <input type="text" class="input" size="20" maxlength="16" />
  <input type="button"  value="button" />
  <br />
  <select name="select">
  </select>
  <br />
  <textarea name="textarea"></textarea>
</p>
<div>变色</div>
</body>
</html>

input div css样式 css

JenniferMuMu

0 关注 0 粉丝 0 动态

相关推荐

自动设置安卓手机wifi代理的PowerShell脚本

在实际测试工作中，经常要将安卓手机通过wifi代理的形式连接到本机的fiddler或charles服务器代理进行抓包测试。最近一直在想，有没有什么方法可以自动设置安卓手机的wifi代理，曾经想通过修改安卓系统配置文件的方式来修改但是没有找到解决方案。最后决

huha 2020-10-16

正则表达式解决input框固定输入值得格式(金额,特殊字符)

栗子：只能输入金额，只能输入小数且最多保留2位不能输入某。//这里我使用的是input，每输入一次就会检查，也可以使用change改变时检查或blur失去焦点时检查。message: "请输入小于1的数!&*――――\-+={}|《》？m

TLROJE 2020-10-26

改变input[type=range]的样式动态滑动

<!DOCTYPEhtml>. <metaname="viewport"content="width=device-width,initial-scale=1.0">. <metahtt

echoes 2020-08-20

HTML 5 <input> 标签

<input> 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。在 HTML 4.01 中，"align" 属性已被废弃，HTM

nercon 2020-08-01

Selenium系列之--06 CSS SELECTOR选择器的一些写法

//div#radio>input:nth-of-type 选择id为radio的div下的第4个input节点。//input.Volvo[name=‘identity‘] 选择class为.Volvo并且name为identity的input节点

zhanghaibing00 2020-06-28

Centos7开启iptables防火墙关闭firewall防火墙

因服务器被GJ，删除了数据库，并索要金额。鉴于不安全性，决定开启iptables防火墙实现安全性，并将默认的firewalld卸掉。允许来自于lo接口的数据包iptables -A INPUT -i lo -j ACCEPT. 开放22端口iptables

Aveiox 2020-06-25

浅析七种经典排序算法

本文分析冒泡、快速、选择、插入、希尔、归并和堆排序，为了对以下各个算法进行方便的测试，测试主方法体如下：。int[] input = {5, 4, 7, 1, 6, 2, 8, 9, 10};本篇博文所有排序实现均默认从小到大。每一次通过两两比较找到最大

henryzhihua 2020-06-21

关于点击input框唤醒键盘导致input被遮盖的问题

之前在百度上看见大多数的方法利用的都是键盘唤醒了之后，页面的实际高度会发生变化。利用这个特点对页面进行一些变动，进而让页面滚动到input框露出。但是在安卓端有一些手机他们并不像iOS一样会自动将内容顶起和恢复，我们就需要自己添加聚焦和失焦事件，去手动的控

zhoutaifeng 2020-06-17

composer出现问题: Could not open input file: composer.phar【转】

This will install composer to the current directory so that you can use php composer.phar

liangzhouqu 2020-06-16

css: reset input record

border: 0;outline: none;vertical-align: -1px;

impress 2020-06-12

input框问题

input框在设置text="number"后的两个问题。

sunshineboyleng 2020-06-12

原生Ajax手动提交form表,将input标签的name:value值转换为字符串

我在使用form进行传递数据的时候,发现不知道如何调用回调函数,这个时候使用了原生的Ajax,但是使用xhr.open进行get请求的时候,需要带上form标签中input的数据.这里需要将input中的name:value转换为字符串的形式进行显式提交。

TONIYH 2020-06-11

jquery根据name属性查找

$ 选择所有的name属性等于‘keleyicom‘的input元素。$ 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以keleyi结尾的元素根据name取值：$.val()根据id取值:. -----jquery添加删除样式

开心就好 2020-06-10

[Python]reduce function & lambda function & factorial

result = reduce(lambda a, b: a*b, [item for item in range(1,i+1)])

x青年欢乐多 2020-06-06

keras_API汇总积累（熟读手册）二，函数式API

输入和输出均为张量，它们都可以用来定义一个模型，这样的模型同 Keras 的Sequential模型一样，都可以被训练。from keras.layers import Input,Dense，TimeDistributed,Embedding,LSTM,

KyrieHe 2020-06-03

页面当中遇到的兼容问题以及解决方案

这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：。input:-webkit-autofill { box-shadow: 0 0 0px 1000px #fff inse

bertzhang 2020-06-02

[Java/Python]输出两数中的最小数 one-liner

System.out.printf("the smaller number is %d.%n", a < b ?

haokele 2020-05-29

input表单如何制作多行文本输入框？一篇文章教你学会使用input标签

本篇文章主要的为大家讲述了HTMLinput标签如何制作一个登陆界面的介绍，有文本框、密码框、单选框、多选框、提交和重置按钮的使用说明，完全的解释了HTML表单input标签的使用详情了。现在让我们来看看这篇文章吧。<form action=&quo

niehanmin 2020-05-28

pip命令报错“no perl script found in input”

windows10，命令行下使用pip命令时报错，python运行成功，且环境变量已经设置，可能是更新了新版本pip所导致

davidliu00 2020-05-26

python input( )

python中有输出函数print( )，那么也就会有输入函数，python 中的输入函数是input( ). 提示语句如果有则显示在标准输出中。如果用户键入EOF，则系统抛出异常。如用户输入 200，那么变量接收的不是整型数200，而是字符串200，即“

JackLang 2020-05-15

JenniferMuMu

W3CSchool教程: HTML 教程; CSS 教程; Bootstrap 教程; Javascript 教程; jQuery 教程

后端教程: C 教程; Java 教程; PHP 教程; Python 教程; Go 教程

移动开发: Android 教程; Swift 教程; Kotlin 教程; jQuery Mobile 教程; ionic 教程

关于我们: 新闻动态; 联系方式; 招聘英才; 安科实验室; 帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号京公网安备11010802014868号