原生 input 记录

最新推荐文章于 2025-03-15 16:41:30 发布

莫等闲-h

最新推荐文章于 2025-03-15 16:41:30 发布

阅读量187

点赞数 3

文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_69068658/article/details/138087720

版权

文章介绍了如何使用CSS伪类（::-webkit-input-placeholder,::-moz-placeholder等）改变输入框placeholder的颜色，并在输入框聚焦时去除边框，同时处理不同浏览器的兼容性问题。着重讲解了:focus状态下的边框处理和outline的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    改变 placeholder 颜色::-webkit-input-placeholder {  /* WebKit, Blink, Edge */
  color: #f00;
}
:-moz-placeholder {  /* Mozilla Firefox 4 to 18 */
  color: #f00;
  opacity: 1;
}
::-moz-placeholder {  /* Mozilla Firefox 19+ */
  color: #f00;
  opacity: 1;
}
:-ms-input-placeholder {  /* Internet Explorer 10-11 */
  color: #f00;
}
 
输入框聚焦时，去除边框
 input边框使用border修改样式，但是聚焦高亮时修改border 没有效果，需要使用 outline<input class="ipt1" type="text" value="" placeholder="请输入" />

<style>
  .ipt1 {
	max-width: 10rem;
	height: 1.56rem;
	font-weight: 600;
	font-size: 1.13rem;
	color: #0b8cbf;
	line-height: 1.56rem;
	text-align: end;
	border: none;
	&:focus {
		outline: 0;
		border: none;
	}
}
</style>
 

                