chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat: 重构搜索框样式

Browse Source
This commit is contained in:
rbetree
2026-01-02 22:08:46 +08:00
parent 0e151156df
commit 87b4cea290
3 changed files with 260 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
assets/style.css
View File

@@ -746,11 +746,10 @@ body .content.expanded {
position: relative;
width: 100%;
max-width: 600px;
--search-control-size: 32px;
--search-control-gap: 0.4rem;
--search-toggle-right: 0.8rem;
--search-icon-right: calc(var(--search-toggle-right) + var(--search-control-size) + var(--search-control-gap));
--search-indicator-right: calc(var(--search-icon-right) + var(--search-control-size));
display: flex;
align-items: stretch;
--search-status-right: 0.9rem;
--search-hint-right: 1.6rem;
background: rgba(var(--card-bg-rgb), 0.65);
border: 1px solid var(--border-color);
backdrop-filter: blur(12px);
@@ -768,7 +767,7 @@ body .content.expanded {
.search-box::after {
content: '';
position: absolute;
right: var(--search-indicator-right);
right: var(--search-status-right);
top: 50%;
transform: translateY(-50%);
width: 6px;
@@ -790,12 +789,16 @@ body .content.expanded {
}
.search-box input {
flex: 1;
min-width: 0;
width: 100%;
padding: var(--spacing-md) calc(var(--search-indicator-right) + 1rem) var(--spacing-md) var(--spacing-lg);
padding: var(--spacing-md) calc(var(--spacing-lg) + 4.8rem) var(--spacing-md) var(--spacing-md);
border: none;
border-radius: var(--radius-lg);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
background-color: transparent;
color: var(--text-color);
font-family: inherit;
font-weight: inherit;
font-size: 1rem;
transition: background-color var(--transition-normal), color var(--transition-normal);
box-shadow: none;
@@ -809,63 +812,102 @@ body .content.expanded {
.search-box input::placeholder {
color: var(--text-muted);
font-family: inherit;
font-weight: inherit;
}
.search-box i {
.search-shortcut-hint {
position: absolute;
right: 1.5rem;
top: 50%;
right: var(--search-hint-right);
transform: translateY(-50%);
padding: 0.1rem 0.4rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: rgba(var(--card-bg-rgb), 0.25);
font-size: 0.78rem;
line-height: 1.2;
color: var(--text-muted);
transition: all 0.3s ease;
opacity: 0.65;
pointer-events: none;
user-select: none;
}
.search-box:focus-within .search-icon,
.search-box:focus-within .search-engine-toggle {
.search-box:focus-within .search-shortcut-hint {
opacity: 0.85;
}
/* 搜索引擎前缀按钮（方案B：输入框前缀一体化） */
.search-engine-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 0.75rem;
width: 120px;
flex: 0 0 120px;
border: none;
border-right: 1px solid var(--border-color);
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
background: transparent;
color: var(--text-muted);
cursor: pointer;
font: inherit;
transition: background var(--transition-normal), color var(--transition-normal), transform var(--transition-normal);
}
.search-engine-button:hover {
background: rgba(var(--card-bg-rgb), 0.25);
}
.search-engine-button:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.search-box:focus-within .search-engine-button {
color: var(--accent-color);
}
.search-box.has-results .search-icon {
color: var(--success-color);
.search-engine-icon {
display: grid;
place-items: center;
height: 1.2em;
width: 1.2em;
min-width: 1.2em;
font-size: 1.25rem;
line-height: 1;
text-align: center;
flex: 0 0 1.2em;
}
.search-box.no-results .search-icon {
color: var(--error-color);
.search-engine-icon.search-engine-icon-svg {
font-size: 1.25rem;
}
/* 搜索图标和搜索引擎切换图标位置调整 */
.search-box .search-icon {
right: var(--search-icon-right);
cursor: pointer;
transition: all 0.3s ease;
width: var(--search-control-size);
height: var(--search-control-size);
display: flex;
align-items: center;
justify-content: center;
.search-engine-icon.search-engine-icon-svg svg {
width: 100%;
height: 100%;
display: block;
}
/* 下拉指示图标交互与状态 */
.search-box .search-engine-toggle:hover { color: inherit; }
.search-engine-label {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.95rem;
}
.search-box.dropdown-open .search-engine-toggle { transform: translateY(-50%) rotate(180deg); }
.search-box .search-engine-toggle {
right: var(--search-toggle-right);
cursor: pointer;
font-size: 0.8rem;
width: var(--search-control-size);
height: var(--search-control-size);
display: flex;
align-items: center;
justify-content: center;
.search-box.dropdown-open .search-engine-button {
background: rgba(var(--card-bg-rgb), 0.25);
}
/* 搜索引擎下拉菜单 */
.search-engine-dropdown {
position: absolute;
top: calc(100% + 5px);
right: 1rem;
top: calc(100% + 6px);
left: 0;
background: rgba(var(--card-bg-rgb), 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
@@ -873,8 +915,11 @@ body .content.expanded {
box-shadow: 0 4px 15px var(--shadow-color);
display: none;
z-index: 100;
padding: 0.5rem;
padding: 0.35rem;
border: 1px solid var(--border-color);
min-width: 190px;
flex-direction: column;
gap: 0.25rem;
}
.search-engine-dropdown.active {
@@ -884,32 +929,56 @@ body .content.expanded {
.search-engine-option {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
justify-content: flex-start;
gap: 0.6rem;
width: 100%;
height: 40px;
border-radius: 50%;
margin: 0.3rem;
padding: 0 0.75rem;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
background-color: var(--card-bg-gradient-1);
background: transparent;
color: var(--text-color);
font: inherit;
}
.search-engine-option:hover {
background-color: var(--card-bg-gradient-2);
transform: translateY(-2px);
box-shadow: 0 3px 8px var(--shadow-color);
background: rgba(var(--card-bg-rgb), 0.22);
}
.search-engine-option:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.search-engine-option.active {
background-color: var(--secondary-bg);
color: white;
color: var(--text-bright);
}
.search-engine-option i {
display: grid;
place-items: center;
position: static;
transform: none;
font-size: 1.2rem;
font-size: 1.25rem;
width: 1.35em;
height: 1.35em;
line-height: 1;
text-align: center;
flex: 0 0 1.35em;
}
.search-engine-option i.search-engine-option-svg svg {
width: 100%;
height: 100%;
display: block;
}
.search-engine-option-label {
font-size: 0.95rem;
}
/* 页面容器 */
@@ -2186,12 +2255,24 @@ body .content.expanded {
}
.search-box input {
padding: 0.8rem 3rem 0.8rem 1.2rem;
padding: 0.8rem 3rem 0.8rem 1rem;
font-size: 0.95rem;
}
.search-box i {
.search-box::after {
right: 0.8rem;
}
.search-shortcut-hint {
right: 1.2rem;
font-size: 0.72rem;
padding: 0.1rem 0.35rem;
}
.search-engine-button {
width: 104px;
flex: 0 0 104px;
padding: 0 0.6rem;
}
.sidebar .logo h1,

100
src/script.js
View File

@@ -874,31 +874,32 @@ document.addEventListener('DOMContentLoaded', () => {
items: []
};
// 搜索引擎配置
const searchEngines = {
local: {
name: '本地搜索',
icon: 'fas fa-search',
url: null // 本地搜索不需要URL
},
google: {
name: 'Google搜索',
icon: 'fab fa-google',
url: 'https://www.google.com/search?q='
},
bing: {
name: 'Bing搜索',
icon: 'fab fa-microsoft',
url: 'https://www.bing.com/search?q='
},
baidu: {
name: '百度搜索',
icon: 'fas fa-paw',
url: 'https://www.baidu.com/s?wd='
}
// 搜索引擎配置
const searchEngines = {
local: {
name: '本地搜索',
iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" focusable="false"><path fill="#616161" d="M29.171,32.001L32,29.172l12.001,12l-2.828,2.828L29.171,32.001z"></path><path fill="#616161" d="M36,20c0,8.837-7.163,16-16,16S4,28.837,4,20S11.163,4,20,4S36,11.163,36,20"></path><path fill="#37474f" d="M32.476,35.307l2.828-2.828l8.693,8.693L41.17,44L32.476,35.307z"></path><path fill="#64b5f6" d="M7,20c0-7.18,5.82-13,13-13s13,5.82,13,13s-5.82,13-13,13S7,27.18,7,20"></path></svg>`,
url: null // 本地搜索不需要URL
},
google: {
name: 'Google搜索',
iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" focusable="false"><path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path><path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path><path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path><path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path></svg>`,
url: 'https://www.google.com/search?q='
},
bing: {
name: 'Bing搜索',
iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" focusable="false"><g fill="#2877fb" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M45,26.10156v-5.10156c0,-0.89844 -0.60156,-1.69922 -1.39844,-1.89844l-4.60156,-1.40234c-5.30078,-1.59766 -10.30078,-3 -15.60156,-4.69922h-0.09766c-0.80078,-0.19922 -1.60156,0.69922 -1.19922,1.5c1.89844,3.89844 3.89844,9.5 3.89844,9.5l6.69922,2.60156c-0.30078,0 -21.69922,11.39844 -21.69922,11.39844l9,-8v-23c0,-0.89844 -0.60156,-1.80078 -1.39844,-2c0,0 -4.90234,-1.89844 -8,-2.89844c-0.20312,-0.10156 -0.40234,-0.10156 -0.60156,-0.10156c-0.39844,0 -0.80078,0.10156 -1.19922,0.39844c-0.5,0.40234 -0.80078,1 -0.80078,1.60156v34.69922c0,0.69922 0.30078,1.30078 0.89844,1.60156c2.10156,1.5 4.30078,3 6.40234,4.5l3,2.09766c0.30078,0.20313 0.69922,0.40234 1.09766,0.40234c0.40234,0 0.70313,-0.10156 1,-0.30078c4.30078,-2.60156 8.70313,-5.19922 13,-7.80078l10.60156,-6.30078c0.60156,-0.39844 1,-1 1,-1.69922z"></path></g></g></svg>`,
url: 'https://www.bing.com/search?q='
},
duckduckgo: {
name: 'DuckDuckGo搜索',
shortName: 'duckgo',
// DuckDuckGo 使用内联 SVG，避免依赖不存在的 Font Awesome 品牌图标
iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 4 40 40" focusable="false"><path fill="#ff3d00" d="M44,24c0,11-9,20-20,20S4,35,4,24S13,4,24,4S44,13,44,24z"></path><path fill="#fff" d="M26,16.2c-0.6-0.6-1.5-0.9-2.5-1.1c-0.4-0.5-1-1-1.9-1.5c-1.6-0.8-3.5-1.2-5.3-0.9h-0.4 c-0.1,0-0.2,0.1-0.4,0.1c0.2,0,1,0.4,1.6,0.6c-0.3,0.2-0.8,0.2-1.1,0.4c0,0,0,0-0.1,0L15.7,14c-0.1,0.2-0.2,0.4-0.2,0.5 c1.3-0.1,3.2,0,4.6,0.4C19,15,18,15.3,17.3,15.7c-0.5,0.3-1,0.6-1.3,1.1c-1.2,1.3-1.7,3.5-1.3,5.9c0.5,2.7,2.4,11.4,3.4,16.3 l0.3,1.6c0,0,3.5,0.4,5.6,0.4c1.2,0,3.2,0.3,3.7-0.2c-0.1,0-0.6-0.6-0.8-1.1c-0.5-1-1-1.9-1.4-2.6c-1.2-2.5-2.5-5.9-1.9-8.1 c0.1-0.4,0.1-2.1,0.4-2.3c2.6-1.7,2.4-0.1,3.5-0.8c0.5-0.4,1-0.9,1.2-1.5C29.4,22.1,27.8,18,26,16.2z"></path><path fill="#fff" d="M24,42c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18c9.9,0,18,8.1,18,18C42,33.9,33.9,42,24,42z M24,8 C15.2,8,8,15.2,8,24s7.2,16,16,16s16-7.2,16-16S32.8,8,24,8z"></path><path fill="#0277bd" d="M19,21.1c-0.6,0-1.2,0.5-1.2,1.2c0,0.6,0.5,1.2,1.2,1.2c0.6,0,1.2-0.5,1.2-1.2 C20.1,21.7,19.6,21.1,19,21.1z M19.5,22.2c-0.2,0-0.3-0.1-0.3-0.3c0-0.2,0.1-0.3,0.3-0.3s0.3,0.1,0.3,0.3 C19.8,22.1,19.6,22.2,19.5,22.2z M26.8,20.6c-0.6,0-1,0.5-1,1c0,0.6,0.5,1,1,1c0.6,0,1-0.5,1-1S27.3,20.6,26.8,20.6z M27.2,21.5 c-0.1,0-0.3-0.1-0.3-0.3c0-0.1,0.1-0.3,0.3-0.3c0.1,0,0.3,0.1,0.3,0.3S27.4,21.5,27.2,21.5z M19.3,18.9c0,0-0.9-0.4-1.7,0.1 c-0.9,0.5-0.8,1.1-0.8,1.1s-0.5-1,0.8-1.5C18.7,18.1,19.3,18.9,19.3,18.9 M27.4,18.8c0,0-0.6-0.4-1.1-0.4c-1,0-1.3,0.5-1.3,0.5 s0.2-1.1,1.5-0.9C27.1,18.2,27.4,18.8,27.4,18.8"></path><path fill="#8bc34a" d="M23.3,35.7c0,0-4.3-2.3-4.4-1.4c-0.1,0.9,0,4.7,0.5,5s4.1-1.9,4.1-1.9L23.3,35.7z M25,35.6 c0,0,2.9-2.2,3.6-2.1c0.6,0.1,0.8,4.7,0.2,4.9c-0.6,0.2-3.9-1.2-3.9-1.2L25,35.6z"></path><path fill="#689f38" d="M22.5,35.7c0,1.5-0.2,2.1,0.4,2.3c0.6,0.1,1.9,0,2.3-0.3c0.4-0.3,0.1-2.2-0.1-2.6 C25,34.8,22.5,35.1,22.5,35.7"></path><path fill="#ffca28" d="M22.3,26.8c0.1-0.7,2-2.1,3.3-2.2c1.3-0.1,1.7-0.1,2.8-0.3c1.1-0.3,3.9-1,4.7-1.3 c0.8-0.4,4.1,0.2,1.8,1.5c-1,0.6-3.7,1.6-5.7,2.2c-1.9,0.6-3.1-0.6-3.8,0.4c-0.5,0.8-0.1,1.8,2.2,2c3.1,0.3,6.2-1.4,6.5-0.5 c0.3,0.9-2.7,2-4.6,2.1c-1.8,0-5.6-1.2-6.1-1.6C22.9,28.7,22.2,27.8,22.3,26.8"></path></svg>`,
url: 'https://duckduckgo.com/?q='
}
};
// 获取DOM元素 - 基本元素
const searchInput = document.getElementById('search');
const searchBox = document.querySelector('.search-box');
@@ -906,8 +907,13 @@ document.addEventListener('DOMContentLoaded', () => {
const searchSections = searchResultsPage.querySelectorAll('.search-section');
// 搜索引擎相关元素
const searchIcon = document.querySelector('.search-icon');
const searchEngineToggle = document.querySelector('.search-engine-toggle');
const searchEngineToggleIcon = searchEngineToggle
? searchEngineToggle.querySelector('.search-engine-icon')
: null;
const searchEngineToggleLabel = searchEngineToggle
? searchEngineToggle.querySelector('.search-engine-label')
: null;
const searchEngineDropdown = document.querySelector('.search-engine-dropdown');
const searchEngineOptions = document.querySelectorAll('.search-engine-option');
@@ -1515,6 +1521,7 @@ document.addEventListener('DOMContentLoaded', () => {
// 初始化搜索引擎下拉菜单事件
const toggleEngineDropdown = () => {
if (!searchEngineDropdown) return;
const next = !searchEngineDropdown.classList.contains('active');
searchEngineDropdown.classList.toggle('active', next);
if (searchBox) {
@@ -1525,18 +1532,12 @@ document.addEventListener('DOMContentLoaded', () => {
}
};
if (searchIcon) {
searchIcon.addEventListener('click', (e) => {
e.stopPropagation();
toggleEngineDropdown();
});
}
if (searchEngineToggle) {
searchEngineToggle.addEventListener('click', (e) => {
e.stopPropagation();
toggleEngineDropdown();
});
// 键盘可访问性：Enter/Space 触发
searchEngineToggle.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
@@ -1574,7 +1575,9 @@ document.addEventListener('DOMContentLoaded', () => {
updateSearchEngineUI();
// 关闭下拉菜单
searchEngineDropdown.classList.remove('active');
if (searchEngineDropdown) {
searchEngineDropdown.classList.remove('active');
}
if (searchBox) {
searchBox.classList.remove('dropdown-open');
}
@@ -1584,6 +1587,7 @@ document.addEventListener('DOMContentLoaded', () => {
// 点击页面其他位置关闭下拉菜单
document.addEventListener('click', () => {
if (!searchEngineDropdown) return;
searchEngineDropdown.classList.remove('active');
if (searchBox) {
searchBox.classList.remove('dropdown-open');
@@ -1603,24 +1607,26 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
// 更新搜索图标以反映当前搜索引擎
if (searchIcon) {
// 清除所有类，保留基本的search-icon类
const classList = searchIcon.className.split(' ').filter(cls => cls === 'search-icon');
searchIcon.className = classList.join(' ');
// 更新搜索引擎按钮（方案B：前缀按钮显示当前引擎）
const engine = searchEngines[currentSearchEngine];
if (!engine) return;
const displayName = engine.shortName || engine.name.replace(/搜索$/, '');
// 添加当前搜索引擎的图标类
const engine = searchEngines[currentSearchEngine];
if (engine) {
const iconClasses = engine.icon.split(' ');
iconClasses.forEach(cls => {
searchIcon.classList.add(cls);
});
// 更新标题提示
searchIcon.setAttribute('title', engine.name);
if (searchEngineToggleIcon) {
if (engine.iconSvg) {
searchEngineToggleIcon.className = 'search-engine-icon search-engine-icon-svg';
searchEngineToggleIcon.innerHTML = engine.iconSvg;
} else {
searchEngineToggleIcon.innerHTML = '';
searchEngineToggleIcon.className = `search-engine-icon ${engine.icon}`;
}
}
if (searchEngineToggleLabel) {
searchEngineToggleLabel.textContent = displayName;
}
if (searchEngineToggle) {
searchEngineToggle.setAttribute('aria-label', `当前搜索引擎：${engine.name}，点击切换`);
}
}
// 执行搜索（根据选择的搜索引擎）

86
templates/layouts/default.hbs
View File

@@ -98,22 +98,76 @@
<!-- 搜索框容器 -->
<div class="search-container">
<div class="search-box">
<input type="text" id="search" placeholder="搜索 Ctrl+K ..." aria-label="搜索" aria-keyshortcuts="Control+K Meta+K">
<i class="fas fa-search search-icon" title="本地搜索"></i>
<i class="fas fa-chevron-down search-engine-toggle" title="选择搜索引擎" role="button" aria-label="选择搜索引擎" aria-expanded="false" tabindex="0"></i>
<div class="search-engine-dropdown">
<div class="search-engine-option" data-engine="local" title="本地搜索">
<i class="fas fa-search"></i>
</div>
<div class="search-engine-option" data-engine="google" title="Google搜索">
<i class="fab fa-google"></i>
</div>
<div class="search-engine-option" data-engine="bing" title="Bing搜索">
<i class="fab fa-microsoft"></i>
</div>
<div class="search-engine-option" data-engine="baidu" title="百度搜索">
<i class="fas fa-paw"></i>
</div>
<button class="search-engine-button search-engine-toggle"
type="button"
title="选择搜索引擎"
aria-label="选择搜索引擎"
aria-haspopup="menu"
aria-controls="search-engine-dropdown"
aria-expanded="false">
<i class="search-engine-icon search-engine-icon-svg" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" focusable="false">
<path fill="#616161" d="M29.171,32.001L32,29.172l12.001,12l-2.828,2.828L29.171,32.001z"></path>
<path fill="#616161" d="M36,20c0,8.837-7.163,16-16,16S4,28.837,4,20S11.163,4,20,4S36,11.163,36,20"></path>
<path fill="#37474f" d="M32.476,35.307l2.828-2.828l8.693,8.693L41.17,44L32.476,35.307z"></path>
<path fill="#64b5f6" d="M7,20c0-7.18,5.82-13,13-13s13,5.82,13,13s-5.82,13-13,13S7,27.18,7,20"></path>
</svg>
</i>
<span class="search-engine-label">本地</span>
</button>
<input type="text" id="search" placeholder="Search" aria-label="搜索" aria-keyshortcuts="Control+K Meta+K">
<span class="search-shortcut-hint" aria-hidden="true">Ctrl+K</span>
<div class="search-engine-dropdown" id="search-engine-dropdown" role="menu" aria-label="搜索引擎列表">
<button class="search-engine-option" type="button" role="menuitem" data-engine="local" title="本地搜索">
<i class="search-engine-option-svg" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" focusable="false">
<path fill="#616161" d="M29.171,32.001L32,29.172l12.001,12l-2.828,2.828L29.171,32.001z"></path>
<path fill="#616161" d="M36,20c0,8.837-7.163,16-16,16S4,28.837,4,20S11.163,4,20,4S36,11.163,36,20"></path>
<path fill="#37474f" d="M32.476,35.307l2.828-2.828l8.693,8.693L41.17,44L32.476,35.307z"></path>
<path fill="#64b5f6" d="M7,20c0-7.18,5.82-13,13-13s13,5.82,13,13s-5.82,13-13,13S7,27.18,7,20"></path>
</svg>
</i>
<span class="search-engine-option-label">本地搜索</span>
</button>
<button class="search-engine-option" type="button" role="menuitem" data-engine="google" title="Google搜索">
<i class="search-engine-option-svg" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" focusable="false">
<path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path>
<path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path>
<path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path>
<path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path>
</svg>
</i>
<span class="search-engine-option-label">Google</span>
</button>
<button class="search-engine-option" type="button" role="menuitem" data-engine="bing" title="Bing搜索">
<i class="search-engine-option-svg" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" focusable="false">
<g fill="#2877fb" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<g transform="scale(5.12,5.12)">
<path d="M45,26.10156v-5.10156c0,-0.89844 -0.60156,-1.69922 -1.39844,-1.89844l-4.60156,-1.40234c-5.30078,-1.59766 -10.30078,-3 -15.60156,-4.69922h-0.09766c-0.80078,-0.19922 -1.60156,0.69922 -1.19922,1.5c1.89844,3.89844 3.89844,9.5 3.89844,9.5l6.69922,2.60156c-0.30078,0 -21.69922,11.39844 -21.69922,11.39844l9,-8v-23c0,-0.89844 -0.60156,-1.80078 -1.39844,-2c0,0 -4.90234,-1.89844 -8,-2.89844c-0.20312,-0.10156 -0.40234,-0.10156 -0.60156,-0.10156c-0.39844,0 -0.80078,0.10156 -1.19922,0.39844c-0.5,0.40234 -0.80078,1 -0.80078,1.60156v34.69922c0,0.69922 0.30078,1.30078 0.89844,1.60156c2.10156,1.5 4.30078,3 6.40234,4.5l3,2.09766c0.30078,0.20313 0.69922,0.40234 1.09766,0.40234c0.40234,0 0.70313,-0.10156 1,-0.30078c4.30078,-2.60156 8.70313,-5.19922 13,-7.80078l10.60156,-6.30078c0.60156,-0.39844 1,-1 1,-1.69922z"></path>
</g>
</g>
</svg>
</i>
<span class="search-engine-option-label">Bing</span>
</button>
<button class="search-engine-option" type="button" role="menuitem" data-engine="duckduckgo" title="DuckDuckGo搜索">
<i class="search-engine-option-svg" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 4 40 40" focusable="false">
<path fill="#ff3d00" d="M44,24c0,11-9,20-20,20S4,35,4,24S13,4,24,4S44,13,44,24z"></path>
<path fill="#fff" d="M26,16.2c-0.6-0.6-1.5-0.9-2.5-1.1c-0.4-0.5-1-1-1.9-1.5c-1.6-0.8-3.5-1.2-5.3-0.9h-0.4 c-0.1,0-0.2,0.1-0.4,0.1c0.2,0,1,0.4,1.6,0.6c-0.3,0.2-0.8,0.2-1.1,0.4c0,0,0,0-0.1,0L15.7,14c-0.1,0.2-0.2,0.4-0.2,0.5 c1.3-0.1,3.2,0,4.6,0.4C19,15,18,15.3,17.3,15.7c-0.5,0.3-1,0.6-1.3,1.1c-1.2,1.3-1.7,3.5-1.3,5.9c0.5,2.7,2.4,11.4,3.4,16.3 l0.3,1.6c0,0,3.5,0.4,5.6,0.4c1.2,0,3.2,0.3,3.7-0.2c-0.1,0-0.6-0.6-0.8-1.1c-0.5-1-1-1.9-1.4-2.6c-1.2-2.5-2.5-5.9-1.9-8.1 c0.1-0.4,0.1-2.1,0.4-2.3c2.6-1.7,2.4-0.1,3.5-0.8c0.5-0.4,1-0.9,1.2-1.5C29.4,22.1,27.8,18,26,16.2z"></path>
<path fill="#fff" d="M24,42c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18c9.9,0,18,8.1,18,18C42,33.9,33.9,42,24,42z M24,8 C15.2,8,8,15.2,8,24s7.2,16,16,16s16-7.2,16-16S32.8,8,24,8z"></path>
<path fill="#0277bd" d="M19,21.1c-0.6,0-1.2,0.5-1.2,1.2c0,0.6,0.5,1.2,1.2,1.2c0.6,0,1.2-0.5,1.2-1.2 C20.1,21.7,19.6,21.1,19,21.1z M19.5,22.2c-0.2,0-0.3-0.1-0.3-0.3c0-0.2,0.1-0.3,0.3-0.3s0.3,0.1,0.3,0.3 C19.8,22.1,19.6,22.2,19.5,22.2z M26.8,20.6c-0.6,0-1,0.5-1,1c0,0.6,0.5,1,1,1c0.6,0,1-0.5,1-1S27.3,20.6,26.8,20.6z M27.2,21.5 c-0.1,0-0.3-0.1-0.3-0.3c0-0.1,0.1-0.3,0.3-0.3c0.1,0,0.3,0.1,0.3,0.3S27.4,21.5,27.2,21.5z M19.3,18.9c0,0-0.9-0.4-1.7,0.1 c-0.9,0.5-0.8,1.1-0.8,1.1s-0.5-1,0.8-1.5C18.7,18.1,19.3,18.9,19.3,18.9 M27.4,18.8c0,0-0.6-0.4-1.1-0.4c-1,0-1.3,0.5-1.3,0.5 s0.2-1.1,1.5-0.9C27.1,18.2,27.4,18.8,27.4,18.8"></path>
<path fill="#8bc34a" d="M23.3,35.7c0,0-4.3-2.3-4.4-1.4c-0.1,0.9,0,4.7,0.5,5s4.1-1.9,4.1-1.9L23.3,35.7z M25,35.6 c0,0,2.9-2.2,3.6-2.1c0.6,0.1,0.8,4.7,0.2,4.9c-0.6,0.2-3.9-1.2-3.9-1.2L25,35.6z"></path>
<path fill="#689f38" d="M22.5,35.7c0,1.5-0.2,2.1,0.4,2.3c0.6,0.1,1.9,0,2.3-0.3c0.4-0.3,0.1-2.2-0.1-2.6 C25,34.8,22.5,35.1,22.5,35.7"></path>
<path fill="#ffca28" d="M22.3,26.8c0.1-0.7,2-2.1,3.3-2.2c1.3-0.1,1.7-0.1,2.8-0.3c1.1-0.3,3.9-1,4.7-1.3 c0.8-0.4,4.1,0.2,1.8,1.5c-1,0.6-3.7,1.6-5.7,2.2c-1.9,0.6-3.1-0.6-3.8,0.4c-0.5,0.8-0.1,1.8,2.2,2c3.1,0.3,6.2-1.4,6.5-0.5 c0.3,0.9-2.7,2-4.6,2.1c-1.8,0-5.6-1.2-6.1-1.6C22.9,28.7,22.2,27.8,22.3,26.8"></path>
</svg>
</i>
<span class="search-engine-option-label">DuckDuckGo</span>
</button>
</div>
</div>
</div>