|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
自定義顏色穩(wěn)重大方通用搜索框（純CSS實(shí)現(xiàn)）
作者:admin 時(shí)間:2022-8-11 15:28:59 瀏覽:本文介紹一個(gè)穩(wěn)重大方的自定義背景顏色通用搜索框，它是由純CSS實(shí)現(xiàn)的，沒有圖片和JS代碼。
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
input, button {
background: none;
outline: none;
border: none;
color: transparent;
background-repeat: no-repeat;
}
.form {
width: 100%;
}
.form:invalid .form__reset {
opacity: 0;
pointer-events: none;
}
.form:invalid .form__button {
pointer-events: none;
pointer: default;
}
.form:valid .form__reset {
opacity: 1;
pointer-events: all;
}
.form__label {
display: flex;
align-items: center;
padding: 10px 20px;
background-color: black;
border: 1px solid transparent;
border-radius: 5px;
transition: border 0.066s linear;
}
.form__label:hover {
border: 1px solid cyan;
}
.form__label:focus-within {
border: 1px solid blue;
}
.form__fieldset {
display: flex;
align-items: center;
justify-items: stretch;
width: 100%;
}
.form__input {
display: inline-block;
vertical-align: middle;
min-width: 200px;
width: 100%;
background-color: transparent;
color: white;
}
.form__input::placeholder {
color: lightgray;
}
.form__glass {
justify-self: start;
vertical-align: middle;
margin-right: 10px;
}
.form__reset {
justify-self: end;
vertical-align: middle;
cursor: pointer;
padding: 5px;
margin-left: 10px;
width: 12px;
height: 12px;
background-position: center;
background-size: 12px 12px;
background-repeat: no-repeat;
border: 1px solid transparent;
transform-origin: center;
transform: rotate(0);
transition: border 0.066s linear, transform 0.066s linear, opacity 0.15s linear;
}
@media (prefers-reduced-motion: true) {
.form__reset {
transition: none;
}
}
.form__reset:hover {
transform: rotate(90deg);
}
.form__reset:focus {
border: 1px solid blue;
}
.form__button {
margin-left: 5px;
background-color: black;
color: white;
align-self: stretch;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body translate="no" >
<form class="form">
<fieldset class="form__fieldset">
<label class="form__label"
for="searchbar">
<img class="form__glass"
src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaGVhZGVyLXNlYXJjaF9fZm9ybV9fZ2xhc3MiCiAgICAgd2lkdGg9IjIwIiBoZWlnaHQ9IjIxIgogICAgIHZpZXdCb3g9IjAgMCAyMCAyMSIKICAgICBmaWxsPSJub25lIgogICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIuMTYxNTMgOS4yNjQ3MUMyLjE2MTUzIDUuNjgyOTggNS4wNjUxIDIuNzc5NDEgOC42NDY4MyAyLjc3OTQxQzEyLjIyODYgMi43Nzk0MSAxNS4xMzIxIDUuNjgyOTggMTUuMTMyMSA5LjI2NDcxQzE1LjEzMjEgMTEuMDUyNyAxNC40MDk4IDEyLjY3MDMgMTMuMjM4NyAxMy44NDQ0QzEyLjA2MzYgMTUuMDIyNiAxMC40NDEgMTUuNzUgOC42NDY4MyAxNS43NUM1LjA2NTEgMTUuNzUgMi4xNjE1MyAxMi44NDY0IDIuMTYxNTMgOS4yNjQ3MVpNOC42NDY4MyAwLjkyNjQ3MkM0LjA0MTc1IDAuOTI2NDcyIDAuMzA4NTk0IDQuNjU5NjMgMC4zMDg1OTQgOS4yNjQ3MUMwLjMwODU5NCAxMy44Njk4IDQuMDQxNzUgMTcuNjAyOSA4LjY0NjgzIDE3LjYwMjlDMTAuNjE1MiAxNy42MDI5IDEyLjQyNTQgMTYuOTIgMTMuODUxNCAxNS43Nzk1TDE3Ljg3NDEgMTkuODAyMkMxOC4yMzU5IDIwLjE2NCAxOC44MjI1IDIwLjE2NCAxOS4xODQzIDE5LjgwMjJDMTkuNTQ2MSAxOS40NDA0IDE5LjU0NjEgMTguODUzOCAxOS4xODQzIDE4LjQ5MTlMMTUuMTYxNiAxNC40NjkzQzE2LjMwMjEgMTMuMDQzMiAxNi45ODUxIDExLjIzMzEgMTYuOTg1MSA5LjI2NDcxQzE2Ljk4NTEgNC42NTk2MyAxMy4yNTE5IDAuOTI2NDcyIDguNjQ2ODMgMC45MjY0NzJaIiBmaWxsPSJyZ2IoMTQ3LCAxNTMsIDE3MikiLz4KPC9zdmc+Cg=="
width="20" height="21"/>
<input class="form__input"
type="search"
name="q"
id="searchbar"
placeholder="輸入關(guān)鍵詞"
tabindex="0"
required/>
<input type="reset"
class="form__reset"
style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiCiAgICAgdmlld0JveD0iMCAwIDEyIDEyIgogICAgIGZpbGw9Im5vbmUiCiAgICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xMS43MDcxIDEuNzA3MTFDMTIuMDk3NiAxLjMxNjU4IDEyLjA5NzYgMC42ODM0MTcgMTEuNzA3MSAwLjI5Mjg5M0MxMS4zMTY2IC0wLjA5NzYzMTEgMTAuNjgzNCAtMC4wOTc2MzExIDEwLjI5MjkgMC4yOTI4OTNMMTEuNzA3MSAxLjcwNzExWk0wLjI5Mjg5MyAxMC4yOTI5Qy0wLjA5NzYzMTEgMTAuNjgzNCAtMC4wOTc2MzExIDExLjMxNjYgMC4yOTI4OTMgMTEuNzA3MUMwLjY4MzQxNyAxMi4wOTc2IDEuMzE2NTggMTIuMDk3NiAxLjcwNzExIDExLjcwNzFMMC4yOTI4OTMgMTAuMjkyOVpNMTAuMjkyOSAxMS43MDcxQzEwLjY4MzQgMTIuMDk3NiAxMS4zMTY2IDEyLjA5NzYgMTEuNzA3MSAxMS43MDcxQzEyLjA5NzYgMTEuMzE2NiAxMi4wOTc2IDEwLjY4MzQgMTEuNzA3MSAxMC4yOTI5TDEwLjI5MjkgMTEuNzA3MVpNMS43MDcxMSAwLjI5Mjg5M0MxLjMxNjU4IC0wLjA5NzYzMTEgMC42ODM0MTcgLTAuMDk3NjMxMSAwLjI5Mjg5MyAwLjI5Mjg5M0MtMC4wOTc2MzExIDAuNjgzNDE3IC0wLjA5NzYzMTEgMS4zMTY1OCAwLjI5Mjg5MyAxLjcwNzExTDEuNzA3MTEgMC4yOTI4OTNaTTEwLjI5MjkgMC4yOTI4OTNMMC4yOTI4OTMgMTAuMjkyOUwxLjcwNzExIDExLjcwNzFMMTEuNzA3MSAxLjcwNzExTDEwLjI5MjkgMC4yOTI4OTNaTTExLjcwNzEgMTAuMjkyOUwxLjcwNzExIDAuMjkyODkzTDAuMjkyODkzIDEuNzA3MTFMMTAuMjkyOSAxMS43MDcxTDExLjcwNzEgMTAuMjkyOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=')"
tabindex="0"/>
</label>
<button class="form__button"
type="submit"
title="Search this website now"
tabindex="0">搜索</button>
</fieldset>
</form>
</body>
</html>
代碼解釋
我們可以很輕松的修改搜索框、按鈕背景及文字顏色。
搜索框背景顏色
.form__label {
...
background-color: black;
...
}把black改為blue，搜索框背景就變成為藍(lán)色。
按鈕背景及文字顏色
.form__button {
...
background-color: black;
color: white;
...
}把black改為blue，按鈕顏色就變成為藍(lán)色。把white改為yellow，按鈕文字就變成為黃色。
修改結(jié)果
搜索圖標(biāo)
下面這個(gè)代碼是搜索圖標(biāo)，
，代碼里可以定義寬(width)和高(height)。
<img class="form__glass" src="...">
重設(shè)圖標(biāo)
下面這個(gè)代碼是重設(shè)圖標(biāo)，
?？梢酝ㄟ^類form__reset設(shè)置該圖標(biāo)的樣式及轉(zhuǎn)動(dòng)動(dòng)畫。
<input type="reset" ... >
這兩個(gè)圖標(biāo)都是使用base64代碼來表示，方便代碼遷移，減少HTTP請(qǐng)求。
總結(jié)
本文介紹了純CSS實(shí)現(xiàn)的自定義顏色穩(wěn)重大方通用搜索框，該搜索框可以自定義樣式，非常實(shí)用。
相關(guān)文章
在下面這篇文章純CSS3實(shí)現(xiàn)精美搜索框中，介紹如何使用CSS3配合HTML placeholder屬性創(chuàng)建一個(gè)精美的CSS3搜索框。
標(biāo)簽: search-box 搜索框
相關(guān)文章
x
- 站長(zhǎng)推薦
