【CSS 18】HTML表单优化输入字段样式输入框填充边框美化彩色输入框获得焦点图标与图像动画效果 transition属性文本域样式 select选择菜单输入按钮响应式

最新推荐文章于 2024-08-30 14:50:40 发布

Zanebla

最新推荐文章于 2024-08-30 14:50:40 发布

阅读量2.5k

点赞数 4

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

本文链接：https://blog.csdn.net/m0_62629457/article/details/131510102

版权

CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

CSS

通过使用 CSS，可以极大地改善 HTML 表单的外观

<!DOCTYPE html>
<html>
<head>
<style>

input[type=text], select {
	width: 100%;
	paading: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid hotpink;
	border-radius: 4px;
	box-sizing: border-box;
}

input[type=submit] {
	width: 100%;
	background-color: #4CAF50;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	border-radius:4px;
	cursor: pointer;
}

input[type=submit]:hover {
	background-color: #45a049;
}

div {
	border-radius: 15px;
	background-color: #f2f2f2;
	padding: 20px;
}
</style>
</head>
<body>

<h1>Using CSS to style a HTML Form</h1>

<div>
	<form action="/action_page.php">
		<label for="fname">First Name</label>
		<input type="text" id="fname" name="firstname" placeholder="Your name...">
		
		<label for="lname">Last Name</label>
		<input type="text" id="lname" name="lastname" placeholder="Your last name...">

		<label for="country">Country</label>
		<select id="country" name="country">
			<option value="australia">Australia</option>
			<option value="china">China</option>
			<option value="usa">USA</option>
		</select>

		<input type="submit" value="Submit">
	</form>
</div>

</body>
</html>

设置输入字段样式
使用 width 属性来确定输入字段的宽度

<style>
/*
适用于所有 <input> 元素
如果只想设置特定输入类型的样式，则可以使用属性选择器
- input[type=text] - 将仅选择文本字段
- input[type=password] - 将仅选择密码字段
- input[type=number] - 将仅选择数字字段
- ...
*/
input {
	width: 100%;
}
</style>

<body>

<p>全款输入字段</p>

<form>
	<label for="fname">First Name</label>
	<input type="text" id="fname" name="fname">
</form>

</body>

填充输入框
使用 padding 属性在文本字段内添加空间
提示：若有很多输入，那么可能还需要添加外边距，以便在它们之外添加更多空间

<!-- 
请注意已将 box-sizing 属性设置为 border-box
这样可以确保元素的总宽度和高度中包括内边距（填充）和最终的边框
-->
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	box-sizing: border-box;
}
</style>
</head>
<body>

<p>填充的文本字段</p>

<form>
	<label for="fname">First Name</label>
	<input type="text" id="fname" name="fname">
	<label for="lname">Last Name</label>
	<input type="text" id="lname" name="lname">
</form>

</body>
</html>

带边框的输入框

<!--
请使用 border 属性更改边框的粗细和颜色，并使用 border-radius 属性添加圆角
如果仅需要下边框，请使用 border-bottom 属性
-->
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	box-sizing: border-box;
	border: 3px solid green;
	border-radius: 6px;
}
	
</style>
</head>
<body>

<form>
	<label for="fname">First Name</label>
	<input type="text" id="fname" name="fname">
	<label for="lname">Last Name</label>
	<input type="text" id="lname" name="lname">
</form>

</body>
</html>

如果仅需要下边框，请使用 border-bottom 属性

input[type=text] {
	border: none;
	border-bottom: 2px solid red;
}

彩色输入框

<!DOCTYPE html>
<html>
<head>
<style>

input[type=text] {
	width: 100%;
	padding: 8px 12px;
	margin: 8px 0;
	box-sizing: border-box;
	border: none;
	border-radius: 6px;
	background-color: #3CBC8D;
	color: white;
}

</style>
</head>
<body>

<form>
	<label for="fname">First Name</label>
	<input type="text" id="fname" name="fname" value="Zhao">
	<label for="lname">Last Name</label>
	<input type="text" id="lname" name="lname" value="Zane">
</form>

</body>
</html>

获得焦点的输入框

<!DOCTYPE html>
<html>
<head>
<style>

input[type=text] {
	width: 100%;
	padding: 8px 12px;
	margin: 8px 0;
	box-sizing: border-box;
	border: 3px solid #ccc;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	border-radius: 7px;
	background-color: green;
	color: #111;	
	outline: none;
}

input[type=text]:focus {
	background-color: lightgreen;
	border: 3px solid #555;
}

</style>
</head>
<body>

<form>
	<input type="text" id="fname" name="fname">
	<input type="text" id="lname" name="lname">
</form>

</body>
</html>

带有图标/图像的输入框

<!DOCTYPE html>
<html>
<head>
<style>
/*
如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置
注意我们添加了一个较大的左内边距（padding-left）来留出图标的空间
*/
input[type=text] {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 6px;
	font-size: 12px;
	background-color: #aaa;
	background-image: url('searchicon.png');
	background-position: 10px 10px;
	background-repeat: no-repeat;
	padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<form>
	<input type="text" name="search" placeholder="Search...">
</form>

</body>
</html>

带有动画效果的搜索输入框

/*
在本例中，我们使用 CSS transition 属性为搜索输入框获得焦点时的宽度变化设置动画
之后将在我们的 CSS 过渡 内容中学到更多有关 transition 属性的知识
*/
input[type=text] {
	width: 111px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
	background-color: white;
	background-image: url('searchicon.png');
	background-position: 10px 10px;
	background-repeat: no-repeat;
	padding: 12px 20px 12px 40px;
	transition: width 0.4s ease-in-out;
}

input [type=text]:focus {
	width: 100%;
}

设置文本域的样式

<!DOCTYPE html>
<html>
<head>
<style>
textarea {
	width: 100%;
	height: 150px;
	padding: 12px 20px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 6px;
	background-color: #AAA;
	font-size: 18px;
	resize: none;
}
</style>
</head>
<body>

<p><b>提示：</b>使用 resize 属性可防止调整 textareas 的大小（禁用右下角的“抓取器”）：</p>

<form>
	<textarea>Some text...

设置选择菜单的样式

<!DOCTYPE html>
<html>
<head>
<style>
select {
	width: 100%;
	padding: 12px 20px;
	border: none;
	border-radius: 6px;
	background-color: #f1f1f1;
}
</style>
</head>
<body>

<p>具有样式的选择菜单</p>

<form>
	<select id="country" name="country">
	<option value="au">Australia</option>
	<option value="ca">Canada</option>
	<option value="usa">USA</option>
	</select>
</form>

</body>
</html>

设置输入按钮的样式

input[type=button], input[type=submit], input[type=reset] {
	background-color: #4CAF50;
	border: none;
	border-radius: 26px;
	color: white;
	padding: 16px 32px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
}