所以我用一些很棒的图标构建了一个整洁的小标题。
为了让用户更改搜索功能的输入类型，我试图通过以下方式来实现：
（1）点击放大镜图标打开搜索栏进行输入（搜索栏使用：焦点扩展）
（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;
}
答案 0 :(得分：0)
单击某些内容会从其他内容中删除焦点 - 按设计。在选择发生时，您始终可以使用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');
})