HTML的input输入框变圆角后去掉边框的方法

最新推荐文章于 2024-04-22 17:56:51 发布

叶卡捷琳堡

最新推荐文章于 2024-04-22 17:56:51 发布

阅读量2.9k

点赞数 3

分类专栏： web前端文章标签： css html web

本文链接：https://blog.csdn.net/weixin_46841376/article/details/113809263

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

- 问题描述
- - 原来的代码
  - 修改后的代码

问题描述

在写网页时，要将<input type="text"/>输入框变为圆角，最外圈会出现一个框（如下图所示），不太好看，如何去掉这个框呢？

原来的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#name{
				/*设置圆角*/
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		账号：<input type="text" name="username" id="name" />
	</body>
</html>

修改前的效果：
在这里插入图片描述

修改后的代码

只需要在CSS中设置outline: none;即可去掉边框

#name{
		border-radius: 10px;
		outline: none;
}

修改后的效果：
在这里插入图片描述

优惠劵

叶卡捷琳堡

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML的input输入框变圆角后去掉边框的方法

文章目录问题描述原来的代码修改后的代码问题描述在写网页时，要将<input type="text"/>输入框变为圆角，最外圈会出现一个框（如下图所示），不太好看，如何去掉这个框呢？原来的代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #name{
复制链接

扫一扫