用css或js实现文本输入框的特效
1文本框默认点击特效:
点击文本框,外围会出现蓝色阴影,取消该特效,为该文本框添加css样式"outline:none;",就取消了默认特效。
2实现百度搜索框点击特效:
点击文本框,文本框的边框出现蓝色实线,我学习到的实现方法:
基础的html元素:
css:为需要该特效的文本框设置该css样式
js:当鼠标点击该文本框时,该文本框的类名改变
总结:
学习了js选取html元素的方法:
1 document.getElementById("id");返回一个
2 document.getElementsByClassName("classname");返回一个类数组
3document.querySelector("选择器");返回一个//querSelectorAll;返回一个数组
学习了css的display属性:
display:inline;行元素,不换行
display:block;块元素,可调宽高
display:inline-block;行内的块,有两者的优点。
写这些,相当于对我的一个记录,如果我的表述有误,请大家多多指教。
用css或js实现文本输入框的特效的更多相关文章
- CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...
- JS 文本输入框放大镜效果
JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...
- JS 仿支付宝input文本输入框放大组件
input输入的时候可以在后边显示数字放大镜 <!doctype html> <html lang="en"> <head> <meta ...
- html、css、js分工,内核,html头,html表单
html:内容css:样式js:交互 内核 浏览器控制台输入navigator.userAgent,回车显示出内核"Mozilla/5.0 (Windows NT 6.1; WOW64) A ...
- 文本输入框input将输入转换为统一大小写
转载地址:http://blog.csdn.net/yieryi_/article/details/52078596 文本输入框input将输入转换为统一大小写,通常有两种方法:JS和CSS方法. 1 ...
- js限制文本框只能输入整数或者带小数点[转]
这篇文章是关于js限制文本框只能输入整数或者带小数点的内容,以下就是该内容的详细介绍. 做表单验证的时候是否会碰到验证某个输入框内只能填写数字呢,仅允许输入整数数字或者带小数点的数字.下面这段代码也许 ...
- ASP.Net MVC4中封装CSS和js冗余代码(不让其大篇的显示在前台上)
(1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用. 由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...
- HTML中<input>參数,以及文本输入框,文本域的解说
<form> <input type="text/password" name="名称" value="文本" /> ...
- CSS设置input placeholder文本的样式
placeholder是HTML5 input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏 ...
随机推荐
- springboot+thymeleaf国际化方法一:LocaleResolver
springboot中大部分有默认配置所以开发起项目来非常迅速,仅对需求项做单独配置覆盖即可 spring采用的默认区域解析器是AcceptHeaderLocaleResolver,根据request ...
- JavaEE——JSP开发模式(model1)
model1开发模式 工作流程: ①浏览器请求,JSP页面接收 ②JSP根据请求和JavaBean进行交互 ③JavaBean进行业务处理,JDBC操纵数据库 ④JSP将请求结果返回浏览器页面 利用m ...
- Have a Good Attitude 良好的态度
Poor attitudes lead to poor communication. Poor communication leads to poor service. Poor service le ...
- NoUniqueBeanDefinitionException常见异常!!
Caused by: org.springframework.beans.factory.NoUniqueBeanDefinitionException: No qualifying bean of ...
- Java的IO操作之关闭流
我们知道,当结束对一个流的操作时,需要调用流的close()方法对其进行释放,这将释放掉与这个流有关的所有资源,包括文件句柄.端口等.如果不关闭流,垃圾回收机制将无法识别你是否已使用完这个文件,读取的 ...
- 微信小程序登入流程
微信小程序登入流程 一.首先前端先传code去后端 wx.login({ success(res) { if (res.code) { //发起网络请求 wx.request({ url: app.g ...
- Win10安装gcc、g++、make
下载安装包: 1. MinGW官网下载:http://www.mingw.org 点击右上角Downloads 点击下载 mingw-get-setup.exe 2. 百度网盘(2 ...
- 代码审计-(Ear Music).任意文件下载漏洞
0x01 代码分析 后台地址:192.168.5.176/admin.php admin admin 安装后的界面 在后台发布了一首新歌后,前台点进去到一个“下载LRC歌词”功能点的时候发现是使用re ...
- Windows快捷方式绑马
0x01前言 windows的shell32在处理控制面板程序的快捷方式文件时,存在一个漏洞,可以加载硬盘上的任意DLL文件,即可执行任意代码. 之前看到一款俄罗斯黑阔写的的快捷方式下载木马并运行的生 ...
- [Luogu3420][POI2005]SKA-Piggy Banks
题目描述 Byteazar the Dragon has NNN piggy banks. Each piggy bank can either be opened with its correspo ...