sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > CSS3教程 > css教程实例 > 去除input边框[css input怎么去掉边框]

去除input边框[css input怎么去掉边框]

作者:cuteur发布时间:2023-02-13分类:css教程实例浏览:评论:0


导读:css去掉input边框的方法:1、使用“border:none;”语句定义无边框样式来去掉;2、使用“border:0;”语句设置边框宽度为0来去掉;3、使用“border:tr...

css去掉input边框的方法:1、使用“border:none;”语句定义无边框样式来去掉;2、使用“border:0;”语句设置边框宽度为0来去掉;3、使用“border:transparent;”语句设置透明边框来去掉。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

方法1:使用border:none;

border属性设置所有的边框属性,当值为none时,表示对标签元素不设置边框属性或者取消边框属性,定义无边框样式。

<!DOCTYPE html>
<html> 
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			input{
				background-color: papayawhip;
			}
			#qd{
				border:none;
			}
		</style>
	</head>
	<body>
		<input type="text" value="测试输入框"/><br /><br />
		<input id="qd" type="text" value="测试输入框"/>
	</body>

</html>

效果图:

1.png

方法1:使用border:0;

通过将边框的宽度设置为0来去除

#qd{
	border:0;
}

效果图:

2.png

方法3:使用border:transparent;

通过将边框的样式设置为透明色来去除

#qd{
	border:transparent;
}

效果图:

3.png

(学习视频分享:css视频教程)

以上就是css input怎么去掉边框的详细内容,更多请关注知识分享网其它相关文章!


欢迎 发表评论:

css教程实例排行
«    2024年6月    »
12
3456789
10111213141516
17181920212223
24252627282930
标签列表
网站分类
文章归档
最近发表
推荐文章