×

HTML:如何去掉input输入框线条以及改变placeholder颜色

作者:Terry2022.04.02来源:Web前端之家浏览:3720评论:0
关键词:htmlcss

今天来分享一个基础的HTML&CSS小应用:如何去掉input输入框线条以及改变placeholder颜色。

去掉input输入框线条

先看效果图:

image.png

当输入的时候,发现外面框框,不美观,所以要去掉。如何搞呢?

我们一般用outline属性,代码如下:

textarea:focus{
      outline: none;
}
input:focus{
      outline: none;
}

当然还有其他方法呢,不过这是最简单的了。

改变placeholder颜色

大家可以看下效果图:

image.png

当我们使用placeholder属性的时候,会遇到输入文字颜色的问题。例如,设计师要求:默认的颜色是浅灰色的,然后输入的时候是黑色的。这样的效果会使得表单更美观,体验好。代码很简单,如下:

.formbox .form-inp::-webkit-input-placeholder{
      color:#a8a8a8; //谷歌内核
  }
  .formbox .form-inp::-moz-placeholder{
     color:#a8a8a8; //火狐
  }
  .formbox .form-inp::-ms-input-placeholder{
        color:#a8a8a8; //IE
  }

试试吧。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/htmlcss20220402a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • jianj

    node看上有点复杂...

  • 访客

    正好遇到,谢谢分享...

  • jimmy

    这个很有趣,国内SEO更多的是百度...

  • jenny

    VUE的总结的不错啊,收藏了。下次搞点React的啊...

  • jenny

    win7最经典,想当初win8出来后都没它好用,怀恋经典。。。...

  • Terry

    谢谢提醒,插件已经修复。...

  • 访客

    士大夫士大夫...

  • 访客

    用這甚麼顏色...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2023 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2