outlin对于文本框的影响

唐鑫tx

于 2019-02-22 19:41:23 发布

阅读量201

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44545501/article/details/87884561

版权

本文介绍如何使用 CSS 的 outline 属性来控制文本框被选中时的视觉效果，通过设置 outline 属性为 0，可以在点击文本框时避免其边框突出，保持页面整洁美观。

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

在做项目时，当你点击文本框时不想突出其元素时可以使用outlin属性来设置。

当没有使用outlin时点击文本框效果

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	input{	
		border:none;
		background:#ddd;
	}
</style>
<body>
	<input type="text">
</body>
</html>

在这里插入图片描述

当使用outlin时点击文本框效果

 <html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	input{	
		border:none;
		background:#ddd;
		outline: 0
	}
</style>
<body>
	<input type="text">
</body>
</html>

在这里插入图片描述