html 搜索高亮效果,html5输入框高亮效果

2024-05-13 01:55:59

【实例简介】登录界面输入框高亮效果

【实例截图】

【核心代码】

当前输入框高亮显示

body,form,h2,p,input{margin:0;padding:0;}

body{color:#4f4f4f;font:14px/1.5 \5fae\8f6f\96c5\9ed1;}

form{width:400px;background:#fef4eb;border:2px solid #f60;padding-bottom:10px;overflow:hidden;zoom:1;margin:10px auto;}

form h2{color:#fe791e;font-size:16px;background:#ffebd7;border-bottom:2px solid #f60;padding:5px 10px;}

form p{float:left;clear:both;width:100%;height:31px;margin-top:10px;line-height:31px;}

form label,form input{float:left;}

form label{width:100px;height:31px;text-align:right;}

form input{border:0;font-family:\5fae\8f6f\96c5\9ed1;background:url(/jzxy/UploadFiles_333/201211/20121112205029674.png) no-repeat;}

form .f-text,form .f-text-high{width:203px;height:31px;padding-left:5px;line-height:31px;}

form .f-text-high{background-position:0 -31px;}

form .f-btn{color:#fff;width:104px;height:31px;cursor:pointer;font-size:16px;background:#f60;line-height:31px;border-radius:5px;}

window.onload = function ()

{

var aInput = document.getElementsByTagName("input");

var i = 0;

for (i = 0; i < aInput.length - 1; i )

{

aInput[i].onfocus = function ()

{

this.className = "f-text-high"

};

aInput[i].onblur = function ()

{

this.className = "f-text"

}

}

};

用户登录

用户名：

密码：

html 搜索高亮效果,html5输入框高亮效果相关推荐

html如何添加时钟效果,HTML5实现时钟效果
以下是完整代码,保存到html文件可以查看效果. HTML5时钟-柯乐义柯乐义原文 HTML5时钟柯乐义提示您,请使用支持HTML5的浏览器,例如Chrome,IE9,IE10,Firefox等 ...
html5悬浮效果,html5悬浮球效果
1 .SuspendedBall{ 2 position:fixed; 3 width:50px; 4 height:50px; 5 background:#3071a9; 6 border-radi ...
《Hexo: 从零开始编写自己的主题》4. fancybox优化图片展示效果、代码高亮以及数学公式
<Hexo: 从零开始编写自己的主题> 1. Hexo概述以及Hexo工作原理 2. 入门Hexo主题编写 3. 优化样式,设计自己的主题 4. fancybox优化图片展示效果.代码高亮 ...
基于vue与element-ui写出的关于搜索框搜索关键字，下方关键字高亮的demo
这是一个基于vue与element-ui写出的关于搜索框搜索关键字,下方关键字高亮的demo 希望对大家有所帮助效果如下: <template>< ...
vue实现echarts树图修改节点图片，修改连线颜色，鼠标悬停显示详情，鼠标右键弹出菜单，搜索，导出PNG，高亮，查看节点是否还有子节点，修改树图的展示方式
其实这些效果之前都有用js写过,但是最近在写vue项目,里面的些许语法还是有些不一样的,所以还是写一遍文章总结一下,下次遇到就可以直接用了. 如果想看js写法,可以看我别的文章首先,实现效果入下图: ...
html5制作波浪,技能get:用HTML5实现波浪效果
rr Document .box{ width: 500px; height: 500px; margin:100px auto; background:hotpink; border-radius: ...
html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
html5 粒子动画效果制作,8款惊艳的HTML5粒子动画特效
原标题:8款惊艳的HTML5粒子动画特效 HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果,粒子动画在HTML5应用中也是比较消耗本地资源的,尤其是CPU,但 ...
html文本框如何做出立体效果,CSS教程:网页input输入框立体效果
CSS教程:网页input输入框立体效果互联网发布时间:2009-04-02 19:34:50 作者:佚名我要评论网页制作Webjx文章简介:去年常常玩开心网,耗在上面的时间也不少 ...

最新文章

热门文章