鼠标点击search 改变两个input的边框颜色 为什么实际上的效果是有两个边框[请忽略onmouseout]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var oInputa=document.getElementById("search1"),
oInputb=document.getElementById("search2");
oInputa.onclick=function(){
this.style.border="1px solid yellow";
oInputb.style.border="1px solid yellow";
}
oInputa.onmouseout=function(){
this.style.border="1px solid blue";
oInputb.style.border="1px solid blue";
}
oinputb.onclick=function(){
this.style.border="1px solid yellow";
oInputa.style.border="1px solid yellow";
}
}
</script>
<style>
body,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td,figure,figcaption{
margin: 0;
padding: 0;
font-family: 微软雅黑
}
a{
text-decoration:none;
color:#fff;
}
#header{
margin:0 auto;
width: 1024px;
height: 55px;
}
#header>ul,li{
float: left;
list-style:none;
line-height: 55px;
}
.menu-content{
margin: 0 auto;
width: 1240px;
height: inherit;
}
#h1{
float:left;
margin-right:10px;
text-indent: -9999px;
background: #ff6700;
width: 55px;
height: 55px;
line-height: 55px;
}
#h1>a{
display: block;
background: url(images/logo-footer.png) no-repeat;
}
#header li>a{
display: block;
padding:0 10px;
}
.list-content{
float:left;
padding-left:50px;
width: 700px;
height: 55px
}
.list-content a{
color:black;
transition:all 0.3s;
}
.list-content a:hover{
color:white;
background:#ff6700;
}
.search{
float:left;
width: 210px;
height: 55px;
}
.search-txt{
margin-top:7px;
float:left;
width: 170px;
height: 40px
}
.search-txt input{
padding:0 10px;
width: 148px;
height: 38px;
border:1px solid red;
}
.search-input{
float:left;
}
.search-input input{
margin-top:7px;
width: 38px;
height: 40px;
border:1px solid red;
border-left:none;
background: white;
}
.search-txt input,.search-input input{
background: white
}
.search-txt input,.search-input input:focus{
outline: none
}
.a{
border:1px solid red;
}
</style>
</head>
<body>
<div id="header">
<div class="menu">
<div class="menu-content">
<h1 id="h1"><a href="#">小米商城</a></h1>
<div class="list-content">
<ul>
<li><a href="#">小米手机</a></li>
<li><a href="#">红米</a></li>
<li><a href="#">平板·笔记本</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">盒子·影音</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<div class="search">
<div class="search-txt" id="search1">
<input type="text" placeholder="Search">
</div>
<div class="search-input" id="search2">
<input type="button" value="click">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
星怨3回答
-
qq_一桥轻雨一伞开_2
你要改变input的边框颜色直接获取input就好了，你获取的是input父级，点击之后你给父级盒子和input都设置了边框 -
山_3
一个边框是div的 一个是input的 随便删除一个 或者覆盖一个就可以了
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5