input使用小技巧
①:如何修改placeholder样式?

input::-webkit-input-placeholder {
color: #ccc;
font-size: 15px;
}
注:其它浏览器适配方案

原文参考:https://webfem.com/post/placeholder
②:设置获取焦点后输入文字大小的样式

input:focus {
font-size: 15px;
{
设置获取到焦点时边框的样式

input:focus {
border: 1px solid red;
}
设置获取到焦点后 input 背景颜色

③:给 input 焦点设置颜色,只需给 input 设置 color 属性即可(这样焦点和输入的文字都是一个颜色)

④:input autofocus 属性,自动获取焦点
http://www.runoob.com/tags/att-input-autofocus.html

注:PC—IE9及以下不支持;移动端—ios safari都不支持,安卓3及以上都支持
⑤:autocomplete属性让浏览器自动记录之前输入的值

注:autocomplete="on" 启用自动记录;autocomplete="off" 禁用自动记录
input使用小技巧的更多相关文章
- input的小技巧 清除自动记录
input 消除自动记忆功能 在html里就可以直接清除了<input type="text" autocomplete="off"> input ...
- [转载]Js小技巧||给input type=“password”的输入框赋默认值
http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...
- 在Android中使用am和input命令在实际使用中的注意事项以及小技巧
在Android使用到am和进行一些操作是非常方便的,比如一个重复自动的操作,具体用来实现一些什么是看个人需求了,接下来说对于am和input的使用. 本文适用于已经大概去了解了am和input的朋友 ...
- 纯html+css中实现静态选座位效果技巧(input+label使用小技巧)
很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下 ...
- css的一些小技巧。修改input样式
在第一次正式写项目的时候,遇到了几个布局的小技巧.记录一下. 我们常常会遇到图片和文字对齐的一种样式.比如 这样的样式,我们写的时候有时候会出现不对齐的情况.我们有俩种方法 一种就是flex的布局,还 ...
- 【每日一个小技巧】Python | input的提示信息换行输出,提示信息用变量表示
[每日一个小技巧]Python | input的提示信息换行输出,提示信息用变量表示 在书写代码的途中,经常会实现这样功能: 请输入下列选项前的序号: 1.选择1 2.选择2 3.选择3 在pytho ...
- JS处理事件小技巧
今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...
- STM32之ADC+步骤小技巧(英文)
神通广大的各位互联网的网友们.大家早上中午晚上好好好.今早起来很准时的收到了两条10086的扣月租的信息.心痛不已.怀着这心情.又开始了STM32的研究.早上做了计算机控制的PID实验,又让我想起了飞 ...
- 你想的到想不到的 javascript 应用小技巧方法
javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...
随机推荐
- 论文阅读笔记四十八:Bounding Box Regression with Uncertainty for Accurate Object Detection(CVPR2019)
论文原址:https://arxiv.org/pdf/1809.08545.pdf github:https://github.com/yihui-he/KL-Loss 摘要 大规模的目标检测数据集在 ...
- Python3——坦克大战
# coding=utf-8 # Version:python3.6.1 __date__ = '2018/9/20 18:51' __author__ = 'Lgsp_Harold' import ...
- [转] 以 async/await 为例,说明 babel 插件怎么搭
你一定碰到过这些库 babel-polyfill 项目地址:https://github.com/babel/babel/blob/master/packages/babel-polyfill 通过两 ...
- postgresql 53300错误
1.查看当前库的最大连接数 show max_connections; 2.查看当前数据库的活动连接数 select datname,application_name,pid,state from p ...
- linux安装postgresql简洁版
环境: linux 7.+ postgresql 10.5 1.下载10.5版本的源码,make后成可执行版本 2.创建数据库 initdb -D /xxx/yyy(对应为数据目录,提前创建好 ...
- docker配置nginx做反向代理管理tomcat应用
由于业务开始复杂,单一tomcat已经不足以满足业务需求,多tomcat部署起来不方便而且面临域名解析问题,因此开始增加反向代理,由于docker的易用性,便使用docker管理各个应用. docke ...
- 区块链基础认识-BTC
1.什么是区块链 a.定义: 从本质上来说区块链就是一种通过将用户的某种特定信息(比如交易信息),通过很多台计算机记录保存并同步的过程,每个区块都记录了对应的交易信息,将这些交易信息串联起来就形成了所 ...
- Set接口下的集合
一.集合(定义字段的时候统一使用包装类) 1.集合大类分为List.Set.Map三种,其中,List集合是有序可重复的,并且可以使用普通for循环.增强for循环.正向迭代器.双向迭代器:Set集合 ...
- vue获取当前对象
<li v-for="img in willLoadImg" @click="selectImg($event)"> <img class=& ...
- SpringBoot使用Graylog日志收集
本文介绍SpringBoot如何使用Graylog日志收集. 1.Graylog介绍 Graylog是一个生产级别的日志收集系统,集成Mongo和Elasticsearch进行日志收集.其中Mongo ...