表单样式优化:美观简洁的账号和步数输入
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
margin-top: 50px;
}
label {
margin-right: 10px;
font-size: 16px;
}
select,
input[type=number] {
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
margin-bottom: 10px;
}
select:focus,
input[type=number]:focus {
outline: none;
box-shadow: 0 0 5px #6c63ff;
}
button[type=submit] {
background-color: #6c63ff;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
button[type=submit]:hover {
background-color: #5a4fcf;
}
</style>
<form method='post' action='/submit'>
<label for='select'>账号:</label>
<select id='select' name='select'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
<option value='option3'>option3</option>
</select>
<br>
<label for='number'>步数:</label>
<input type='number' id='number' name='number' min='20000' max='21000' value='${Math.floor(Math.random() * 1000) + 20000}'>
<br>
<button type='submit'>Submit</button>
</form>
原文地址: https://www.cveoy.top/t/topic/oI55 著作权归作者所有。请勿转载和采集!