好看的表單input輸入框focus聚焦樣式
作者:admin 時間:2022-12-7 13:40:14 瀏覽:網頁設計中表單非常常見常用，一個好的表單樣式能讓更多訪客產生好感，所以表單UI設計尤為重要。本文介紹一個好看的表單input輸入框focus聚焦樣式。
如上圖看到，當鼠標點擊表單input輸入框時，輸入框會通過亮色凸顯起來，而整個表單form盒子也有一個陰影shadow顯示效果。這種交互效果讓人看了多了一份舒適的感覺。
下面是完整的HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
form:focus-within {
box-shadow: 0px 0.2em 2.5em #c4c4c4;
transform: scale(1.025);
}
@media screen and (prefers-reduced-motion: reduce) {
form:focus-within {
box-shadow: none;
transform: none;
}
}
body {
background-color: #f8f8f8;
color: #444444;
font-family: "Open Sans";
padding-bottom: 6em;
}
main {
margin: 1.5em;
}
@media screen and (min-width: 35em) {
main {
margin: 3em;
}
}
form {
background-color: #ffffff;
border-top: 1px solid #2491eb;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
box-shadow: 0px 1px 1px #aaaaaa;
display: block;
max-width: 90vw;
margin: 0 auto;
padding: 3em 1.5em 0.5em 1.5em;
transition: 250ms box-shadow ease-out, 250ms transform ease-out;
}
@media screen and (min-width: 35em) {
form {
max-width: 70vw;
padding: 3em 2em 0.5em 2em;
}
}
.form-header {
border-bottom: 1px solid #e0e0e0;
display: flex;
flex-direction: column;
margin-bottom: 2em;
padding-bottom: 0.75em;
width: 100%;
}
@media screen and (min-width: 26em) {
.form-header {
align-items: flex-end;
justify-content: space-between;
flex-direction: row;
}
}
.form-header__title {
font-weight: 300;
margin: 0 0 0.5em 0;
padding: 0;
}
@media screen and (min-width: 26em) {
.form-header__title {
margin: 0;
}
}
.form-header__progress {
font-size: 0.85em;
letter-spacing: 0.05em;
margin: 0;
padding: 0 0.25em 0.25em 0;
text-transform: uppercase;
}
.mailing {
border: none;
margin-bottom: 2em;
padding: 0;
}
.mailing__title {
font-size: 1.25em;
font-weight: 300;
margin-bottom: 1.5em;
width: 100%;
}
.mailing .optional {
font-variant: small-caps;
letter-spacing: 0.025em;
margin-left: 0.5em;
}
label {
cursor: pointer;
display: block;
transition: 125ms color ease-out;
}
label:focus-within {
color: #2491eb;
}
input[type=email],
input[type=text],
input[type=number],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #e0e0e0;
border-bottom-color: #444444;
border-radius: 0;
display: block;
line-height: 1;
margin-top: 0.5em;
margin-bottom: 1.5em;
padding: 0.85em 0.75em 0.75em 0.75em;
width: calc(100% - 1.25em);
transition: 125ms border-color ease-out;
}
input[type=email]:hover,
input[type=text]:hover,
input[type=number]:hover,
textarea:hover {
border-color: #444444;
}
input[type=email]:focus,
input[type=text]:focus,
input[type=number]:focus,
textarea:focus {
border-color: #2491eb;
outline: 1px solid #2491eb;
}
textarea {
line-height: 1.5;
margin-bottom: 0.5em;
min-height: 4em;
overflow: auto;
resize: vertical;
}
input[type=submit] {
background-color: #2491eb;
border-radius: 0.25em;
border: 1px solid #1277ca;
color: #ffffff;
font-size: 1.1em;
letter-spacing: 0.025em;
margin-top: 0.25em;
margin-bottom: 2em;
padding: 1em;
transition: 125ms background-color ease-out, 125ms border-color ease-out;
width: 100%;
}
input[type=submit]:focus {
box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #2491eb;
outline: none;
}
input[type=submit]:hover {
background-color: #147fd8;
border-color: #116cb7;
text-decoration: underline;
}
input[type=submit]:active {
background-color: #0e5896;
border-color: #0b4575;
position: relative;
top: 1px;
text-decoration: none;
transition: none;
}
</style>
</head>
<body>
<main>
<form>
<div class="form-header">
<h1 class="form-header__title">個人信息</h1>
<p class="form-header__progress">Step 2 of 4</p>
</div>
<fieldset class="mailing">
<legend class="mailing__title"></legend>
<label for="name">
姓名
<input required id="name" name="name" autocomplete="name" autocorrect="off" type="text" />
</label>
<label for="street-address">
街道
<input required id="street-address" name="street-address" autocomplete="street-address" autocorrect="off" type="text" />
</label>
<label for="address-line1">
門牌號 <span class="optional">（可選）</span>
<input id="address-line1" name="address-line1" autocomplete="address-line1" autocorrect="off" type="text" />
</label>
<label for="city">
城市
<input required novalidate="" id="city" name="city" autocomplete="shipping locality" autocapitalize="on" autocorrect="off" type="text" />
</label>
<label for="postal-code">
郵箱
<input required novalidate="" id="postal-code" name="postal-code" autocomplete="postal-code" autocorrect="off" type="number" />
</label>
<label for="delivery-instructions">
交付說明 <span class="optional">（可選）</span>
<textarea id="delivery-instructions" name="textarea" dir="auto"></textarea>
</label>
</fieldset>
<input name="submit" type="submit" value="保存&繼續" />
</form>
</main>
</body>
</html>
代碼解釋
使用:focus選擇器。
語法很簡單。想要在用戶點擊時用橙色勾勒出輪廓，描述方法如下：
textarea:focus {
outline: 1px solid orange;
}:focus是一個與其他選擇器一樣的選擇器，它接受所有 CSS 屬性。
我們可以改變輸入框鼠標懸停及聚焦時的顏色：
input[type=email]:hover,
input[type=text]:hover,
input[type=number]:hover,
textarea:hover {
border-color: #444444; /* 鼠標懸停輸入框顏色 */
}
input[type=email]:focus,
input[type=text]:focus,
input[type=number]:focus,
textarea:focus {
border-color: #2491eb; /* 鼠標聚焦輸入框顏色 */
outline: 1px solid #2491eb; /* 鼠標聚焦輸入框輪廓顏色 */
}
:focus-within
:focus-within是一個與焦點相關的偽類選擇器，可以在其中一個子元素獲得焦點時將樣式應用于父元素。焦點事件冒泡，直到它遇到一個 CSS 規則要求它應用它的樣式指令。
此選擇器的一個常見用例是在其中一個輸入元素獲得焦點時將樣式應用于整個表單。在本示例中，我稍微放大了整個表單的大小，給用戶增加了一點動畫體驗，可以輕松修改陰影顏色及動畫縮放。
form:focus-within {
box-shadow: 0px 0.2em 2.5em #c4c4c4;
transform: scale(1.025);
}相關文章
相關文章
x
- 站長推薦
