所以我用一些很棒的图标构建了一个整洁的小标题。
为了让用户更改搜索功能的输入类型，我正在努力做到这一点，以便他们可以通过以下方式做到这一点:
(1) 单击放大镜图标打开搜索栏进行输入(搜索栏使用:focus 扩展)
(2) 输入单词后，用户会再次选择放大镜(位于搜索栏的末尾)。
(3) 这扩展了表示输入类型的其他图标列表(即音频文件的音符)。
(4) 选择图标后，将替换放大镜图标并提交。 [这部分我是用 JavaScript 做的，所以没什么大不了的。]
最大的问题是点击图标时搜索栏不会保持焦点，我什至不确定我是否可以点击图标。感谢您提供任何帮助。
这是我的 HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="icomoon/style.css">
<title>outline</title>
</head>
<body>
<header class="header">
<ul class="navigation-bar">
<li class="nav-list">
<div class="nav-item" id="search">
<label class="search-label">
<input class="search-button"><span class="icon-search" id="icon-search-span-2"></span></input>
<button class="search-type"><span class="icon-search" id="icon-search-span"></span></button></label>
</div>
</li>
<li class="nav-list"><div class="nav-item" id="login"><button class="login-button"><span class="icon-user3"></span></button></div></li>
<li class="nav-list"><div class="nav-item" id="options"><button class="options-button"><span class="icon-menu2"></span></button></div></li>
</ul>
</header>
</body>
</html>
还有我的 CSS:
html {
background-image: url("http://www.htmlhive.com/wp-content/uploads/2012/02/bluestripes.png");
}
container {
width:100%
}
body {
margin: 0 0 0 0;
margin-top: 10px;
width: 100%;
}
.header {
background-color:#0099CC;
width:100%;
height:50px;
}
.navigation-bar {
display:table;
list-style-type: none;
margin-top:0;
margin-left:auto;
margin-right:auto;
padding: 0;
width:700px;
}
.nav-item {
font-weight:bold;
color: #FFFFFF;
background-color:transparent;
display: inline;
text-align:left;
padding:4px;
text-decoration: none;
text-transform: uppercase;
}
.nav-list {
display:table-cell;
height:30px;
}
#search {
display:table-cell;
height:30px;
width:375px;
padding-right:10px;
}
#login {
display:table-cell;
height:30px;
width:175px;
}
#options {
display:table-cell;
height:30px;
width:75px;
}
@media (max-width:700px) {
.header {
height:120px;
}
.nav-list {
display:inline-block;
vertical-align: middle;
}
#search {
text-align: left;
width:645px;
padding-top:10px;
}
#login {
display:inline-block;
padding-top: 22px;
padding-bottom: 35px;
margin-top:35px;
height:0px;
width:485px;
text-align: center;
}
#options {
display:inline-block;
height:0px;
padding-top: 22px;
padding-bottom: 35px;
margin-top:35px;
width:152px;
text-align: center;
}
.options-button {
margin-top:-20px;
}
.search-button {
margin-left:60px;
margin-top:3px;
transition:all .8s;
}
.search-button:focus {
text-align: left;
padding-left:20px;
padding-right:40px;
width:465px;
}
#icon-search-span-2 ~ .search-button {
text-align: left;
padding-left:20px;
padding-right:40px;
width:465px;
}
.search-button:focus ~ .search-type {
margin-left:545px;
}
.search-button:focus ~ #icon-search-span-2 {
color:transparent;
}
.login-button {
margin-top:-20px;
margin-right:325px;
}
#icon-search-span {
padding:40px;
line-height:17px;
margin-left:0px;
margin-top:0px;
}
}
.options-button {
background-color: transparent;
border: 2px solid #FFFFFF;
border-radius:25px;
color:#FFFFFF;
font-size:20px;
padding:5px;
width:40px;
vertical-align: middle;
}
.search-button {
background-color: transparent;
border: 2px solid #FFFFFF;
border-radius:25px;
color:#FFFFFF;
font-size:20px;
margin-left:55px;
padding:5px;
width:26px;
vertical-align: middle;
transition:all .8s;
}
@media (min-width:700px) {
#search {
position:relative;
top:0px;
}
.search-button:focus {
text-align:left;
padding-left:20px;
padding-right:40px;
width:600px;
}
.search-button:focus ~ .search-type {
margin-top:-41px;
margin-left:680px;
transition:all .8s;
}
.search-button:focus ~ #icon-search-span-2 {
color:transparent;
}
#login {
position:absolute;
vertical-align: middle;
margin-left:40px;
}
#options {
position:absolute;
vertical-align: middle;
margin-left:90px;
}
.search-button:focus ~ #login {
}
}
.login-button {
background-color: transparent;
border: 2px solid #FFFFFF;
border-radius:25px;
color:#FFFFFF;
font-size:20px;
padding:5px;
width:40px;
vertical-align: middle;
}
#icon-search-span {
padding:7px;
line-height:17px;
margin-left:-5px;
margin-top:-15px;
vertical-align: middle;
}
.search-label {
position:absolute;
margin-left:5px;
}
.search-type {
position:absolute;
background-color: transparent;
border-radius:25px;
color:#FFFFFF;
font-size:20px;
margin-top:-41px;
border:2px transparent;
margin-left:-9999px;
pointer-events: none;
padding: 5px;
height:38px;
width:38px;
vertical-align: middle;
z-index: 100;
transition:all .8s;
}
#icon-search-span-2 {
position: absolute;
font-size:20px;
margin-left:-30px;
margin-top:12px;
transition:all .2s;
}
最佳答案
点击某物会将焦点从其他东西上移开 - 这是设计使然。选择发生时，您始终可以使用 JavaScript 将焦点设置回输入。
您可能想使用一个类名并使用 JavaScript 而不是 :focus 伪类来控制它。为此使用 jQuery 确实使您的 JavaScript 更容易。
CSS:
.search-button.focus {
text-align:left;
padding-left:20px;
padding-right:40px;
width:600px;
}
JS:
$('.search-button').on('click', function() {
$(this).addClass('focus');
})
关于html - 在没有 "unfocusing"输入的情况下向输入添加可点击按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24810718/