Question

今天我的搜索框上收到了一个奇怪的边框，我完全不知道如何让它们消失。

JSFiddle：http://jsfiddle.net/iamstiankarlsen/9XxsX/

<body>

   <!-- Begin Wrapper -->
   <div id="wrapper">

         <!-- Begin Left Column -->
         <div id="leftcolumn" class="borders">

               <!--<div class="circular"></div>-->
               <a class="alpha" href="#">Link</a>
               <a class="alpha" href="#">Link</a>

               <a class="alpha" style="margin: 45px 0 5px;" href="#">Link</a>
               <a class="alpha" href="#">Link</a>
               <a class="alpha" href="#">Link</a>
               <a class="alpha" href="#">Link</a>
               <a class="alpha" href="#">Link</a>
               <form class="alphasearch" action="#" method="get" ><fieldset>
               <input type="text" class="search" value="Strange Border #1" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="q" /></fieldset></form>

         </div>
         <!-- End Left Column -->

         <!-- Begin Left Middle Column -->
         <div id="leftmiddle">
               <a class="beta" href="#">Link</a>
               <a class="beta" href="#">Link</a>

               <a class="beta" style="margin: 45px 0 5px;" href="#">Link</a>
               <a class="beta" href="#">Link</a>
               <a class="beta" href="#">Link</a>
               <a class="beta" href="#">Link</a>
               <a class="beta" href="#">Link</a>
               <form class="betasearch" action="#" method="get"><fieldset>
               <input type="text" class="search" value="Strange Border #2" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="q" /></fieldset></form>

         </div>
         <!-- End Left Middle Column -->

   </div>
   <!-- End Wrapper -->

</body>

/*

      Original files by Keith Donegan Code-Sucks.com

*/

* {
 padding: 0;
 margin: 0;
 background: url(bg/rotate.php) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 width: 50%;
 height: 50%;
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 min-width: 925px;
 max-width: 925px;
 min-height: 350px;
 max-height: 350px;
}
#navigation {
 float: left;
 width: 900px;
 color: #333;
 padding: 10px;
 margin: 0px 0px 5px 0px;
}
#leftcolumn { 
 margin: 0px 5px 5px 0px;
 padding: 0px;
 height: 350px;
 width: 225px;
 float: left;
}
#leftmiddle { 
 margin: 0px 5px 5px 0px;
 padding: 0px;
 height: 350px;
 width: 225px;
 float: left;
}
#rightmiddle { 
 margin: 0px 5px 5px 0px;
 padding: 0px;
 height: 350px;
 width: 225px;
 float: left;
}
#rightcolumn { 
 margin: 0px 5px 5px 0px;
 padding: 0px;
 height: 350px;
 width: 225px;
 float: left;
}
#footer { 
 width: 900px;
 clear: both;
 color: #333;
 border: 0px solid #ccc;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}
.background {
 background: rgb(255, 255, 255);
 background: rgba(255, 255, 255, .5);
 -moz-border-radius: 8px;
 border-radius: 8px;
}
.borders {
 -moz-border-radius: 8px;
 border-radius: 8px;
}
.alpha {
 display: block;
 -moz-border-radius: 5px;
 border-radius: 5px;
 padding: 10px;
 text-align: center;
 font-weight: bold;
 margin: 5px 0px 0px;
 background: #ee4356;
}
.alphasearch {
 display: block;
 -moz-border-radius: 5px;
 border-radius: 5px;
 margin: 5px 0px 0px;
 height: 25px;
 width: 182px;
 border: 5px solid #ee4356;
 padding: 0 8px 0 25px;
 color: #fff;
 font-weight: bold;
 background: rgba(34, 34, 34, .2) url(search.png) left center no-repeat;
}
.search {
 display: block;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 color: #fff;
 font-weight: bold;
}
.beta {
 display: block;
 -moz-border-radius: 5px;
 border-radius: 5px;
 padding: 10px;
 text-align: center;
 font-weight: bold;
 margin: 5px 0px 0px;
 background: #5ebef1;
}
.betasearch {
 display: block;
 -moz-border-radius: 5px;
 border-radius: 5px;
 margin: 5px 0px 0px;
 height: 25px;
 width: 182px;
 border: 5px solid #5ebef1;
 padding: 0 8px 0 25px;
 color: #fff;
 font-weight: bold;
 background: rgba(34, 34, 34, .2) url(search.png) left center no-repeat;
}
.gamma {
 display: block;
 -moz-border-radius: 5px;
 border-radius: 5px;
 padding: 10px;
 text-align: center;
 font-weight: bold;
 margin: 5px 0px 0px;
 background: #7CB854;
}
.delta {
 display: block;
 -moz-border-radius: 5px;
 border-radius: 5px;
 padding: 10px;
 text-align: center;
 font-weight: bold;
 margin: 5px 0px 0px;
 background: #7CB854;
}
.blue {
 background: #5ebef1;
}

a:link, a:visited, a:hover, a:active {
 color: #fff;
 text-decoration:none;
}
.circular {
 width: 225px;
 height: 100px;
 border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 -moz-border-radius: 5px 5px 0px 0px; /* 0px 0px 5px 5px */
 background: url(logo.jpg) no-repeat;
 margin: 0px 0px 5px;
}

Answer 1

尝试一下：使用border:none;

fieldset{
    border:none;
}
.search{
    border:none; 
}

jsFiddle

输入值奇怪的边界？ IDK

1 个答案: