CSS实现input美化操作默认是为灰色,并且有提示

如下图

鼠标点击后文字消失,鼠标移开后文字显示

给input入下图添加代码

style="color:#cccccc; outline:none;"value="用户名/邮箱/手机号" οnfοcus="this.value=''" οnblur="this.value='用户名/邮箱/手机号'"

CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示相关推荐

  1. 简单实现鼠标移上去显示所有文字,移走又隐藏

    简单实现鼠标移上去显示所有文字,移走又隐藏,并且会依据你鼠标的位置,相应的发生改变. jsp代码: <div id="allDiv" style="border:s ...

  2. css鼠标移入线条延中心伸长,jquery鼠标悬浮,显示动态延伸线条,如何在鼠标移开后依然让线条元素延伸到终点...

    1.一个标题,鼠标悬浮时从图片中心伸出一个类似箭头指示的线条, 使用jquery hover添加类的方法给这个标题添加动画,动画是用css keyframes做的, 困惑的是有时候线条动画还没到终点鼠 ...

  3. 使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部

    使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部 <template> <div> <table> <tr v-for="i ...

  4. vue实现文字过长鼠标移上去显示对应文字,移走隐藏

    vue实现文字过长鼠标移上去显示对应文字,移走隐藏 vue项目里实现列表里因文字过长,加上鼠标移上去显示对应文字效果 示例图片 html js 数据定义 style vue项目里实现列表里因文字过长, ...

  5. html在表单左上角显示文字,js+css实现增加表单可用性之提示文字

    平常设计表单的时候,我们会加入一些提示文字,比如说在搜索框里,我们会提示"请输入关键字",并在搜索框得到焦点和失去焦点的时候适时的隐藏和显示,最常见的做法是利用value来设置: ...

  6. php输入框里的提示文字,input 标签实现输入框带提示文字效果(两种方法)

    方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登 ...

  7. input框聚焦时,提示文字上移

    如图所示,期望实现下图效果 当input框聚焦时,提示词上移且样式改变,如果input输入了值,则提示词不还原位置,如果不存在,提示词还原位置. 思路: 移动词为label,当input.onfocu ...

  8. input 框 去掉下面的提示文字、提示选项

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 我的一个输入框总是有提示文字: 2. 去掉方法,给 input 加一个属性: autocomp ...

  9. input文本框中添加提示文字,输入后自动消失

    <input placeholder="提示文字"/> 效果: 如果小博的文章对你有所帮助,欢迎点赞留言关注!!!

最新文章

  1. FMPEG结构体分析:AVStream
  2. 成功解决源路径太长,源文件名长度大于文件系统支持的长度。请尝试将其移动到具有较短路径名称的位置,或者在执行此操作前尝试将其重命名为较短的名称
  3. python递归面试题_python面试题
  4. Fiddler抓包原理解析
  5. mescroll上拉加载的实现
  6. 【转】RabbitMQ六种队列模式-3.发布订阅模式
  7. mybatis生成工具
  8. list选取多个元素 python_python基础篇:list列表的操作大盘点
  9. FusionCharts 技术文档-Jsp画图例子
  10. Element-UI + Vue.js + SpringBoot 实现前后端分离入门项目
  11. JdbcTemplate查询数据 三种callback之间的区别(ResultSetExtractor,RowMapperRowCallbackHandler)
  12. Camtasia Studio2022卡塔莎(专业的电脑屏幕录像软件)
  13. 颜色拾取器和红蜻蜓截图
  14. LoRa SX1278/76驱动原理 附代码
  15. 【转载】Shell图形化监控网络流量
  16. 格鲁夫给经理人的第一课
  17. 通过matlab和simulink实现BSC二进制对称信道的仿真
  18. from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for ...
  19. 基于单片机MC9S12XS128的两轮自平衡小车设计
  20. 单调队列,单调栈总结

热门文章

  1. idea网页预览功能_IDEA 2020.2 重磅发布,动画级新功能预览!
  2. “脱虚向实”大潮下:新能源自动驾驶从大厂抢人靠什么
  3. MIT喊你来上课,深度学习课程,免费的那种 | 资源
  4. 3D特效师可以下班了丨Science
  5. Python之路(第二十一篇) re模块
  6. 痞子衡嵌入式:第一本Git命令教程(7.1)- 清理之缓存(stash)
  7. banana pi BPI-R1 原理图下载地址:
  8. phantomjs学习资料
  9. Forbidden You don#39;t have permission to access / on this server.
  10. 以sysdba身份登录oracle报ORA-1031权限不足错误之完美分析