{site_name}

{site_name}

🌜 搜索

CSS表单是一种使用CSS样式调整HTML表单元素外观和布局的技术

前端 𝄐 0
css中表单,css表单样式怎么写,css3表单,css怎样设置表单的宽和高,css表单大全,css做表单
CSS表单是一种使用CSS样式调整HTML表单元素外观和布局的技术。它允许开发人员自定义表单元素的颜色、字体、大小、边框、背景等属性,从而使表单更具有吸引力并增强用户交互性。

以下是一个简单的CSS表单样例:

html
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>

<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br>

<label for="message">留言:</label>
<textarea id="message" name="message"></textarea><br>

<input type="submit" value="提交">
</form>


接下来,我们将使用CSS为这个表单添加样式:

css
form {
margin: 20px;
padding: 20px;
background-color: #f8f8f8;
border-radius: 4px;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}

input, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

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


上面的CSS样式将把表单元素变成一个漂亮的矩形框,每个输入框都有一个灰色边框和圆角,标签使用黑色字体加粗显示,提交按钮会随鼠标悬停而改变背景颜色。