我正在想办法"合并"；输入框中带有文本的"搜索图标"("search here.."(，这样当我在输入框内点击并键入时，不仅文本而且图标都会消失。我还希望图标将具有与"图标"相同的颜色；在此处搜索"文本
谢谢！
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #ffffff;
font-size: 18px;
font-family: Arial, sans-serif;
font-weight: bold;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 5px;
background-color: #000;
}
a.nounderline span {
color: #00B200;
}
.topnav input[type=text] {
float: left;
padding: 4.5px;
padding-left: 28px;
width: 305px;
border: 2px solid #00B200;
border-radius: 18px;
outline: inherit;
margin-top: 80px;
margin-left: 115px;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 18px;
direction: inherit;
}
input::placeholder {
color: #BEBEBE;
}
span.topnav {
right: 50px;
}<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
<a href="index.html" class="nounderline">Hello</a>
</div>
</header>
<div class="topnav">
<input style="position:relative;" type="text" name: "searchText" placeholder="Search here.." maxlength="18">
<span style="position:absolute; left: 126px; top: 119px;" class="fa fa-search icon"></span>
</div>
</html>当文本框处于焦点时，可以使用后续同级组合来隐藏图标。
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #ffffff;
font-size: 18px;
font-family: Arial, sans-serif;
font-weight: bold;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 5px;
background-color: #000;
}
a.nounderline span {
color: #00B200;
}
.topnav input[type=text] {
float: left;
padding: 4.5px;
padding-left: 28px;
width: 305px;
border: 2px solid #00B200;
border-radius: 18px;
outline: inherit;
margin-top: 80px;
margin-left: 115px;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 18px;
direction: inherit;
}
input::placeholder {
color: #BEBEBE;
}
span.topnav {
right: 50px;
}
#my-search-box:focus ~
#fa-search-icon {
opacity: 0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
<a href="index.html" class="nounderline">Hello</a>
</div>
</header>
<div class="topnav">
<input id="my-search-box" style="position:relative;" type="text" name: "searchText" placeholder="Search here.." maxlength="18">
<span id="fa-search-icon" style="position:absolute; left: 126px; top: 119px;" class="fa fa-search icon"></span>
</div>
</html>您需要这样的结果吗？
input_text = document.querySelector('.topnav > input');
input_loop = document.querySelector('.fa.fa-search.icon');
input_text.oninput = function() {
if (this.value == '' || this.value == this.defaultValue) {
input_loop.classList.remove('close_loop');
this.classList.remove('cursor_left');
} else {
input_loop.classList.add('close_loop');
this.classList.add('cursor_left');
}
}body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #ffffff;
font-size: 18px;
font-family: Arial, sans-serif;
font-weight: bold;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 5px;
background-color: #000;
}
a.nounderline span {
color: #00B200;
}
.topnav input[type=text] {
float: left;
padding: 4.5px;
padding-left: 28px;
width: 305px;
border: 2px solid #00B200;
border-radius: 18px;
outline: inherit;
margin-top: 80px;
margin-left: 115px;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 18px;
direction: inherit;
transition: .3s;
}
input::placeholder {
color: #BEBEBE;
}
.fa-search:before {
color: #BEBEBE;
}
span.topnav {
right: 50px;
}
.close_loop {
display: none!important;
}
.cursor_left {
padding-left: 10px!important;
}<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<header>
<div class="container">
<a href="index.html" class="nounderline">Hello</a>
</div>
</header>
<div class="topnav">
<input style="position:relative;" type="text" name: "searchText" placeholder="Search here.." maxlength="18">
<span style="position:absolute; left: 126px; top: 119px;" class="fa fa-search icon"></span>
</div>
</body>