2013-12-23 83 views
-2

今天我在搜索框上收到一個奇怪的邊框,我完全不知道如何讓它們消失。輸入值奇怪的邊框? IDK

的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; 
} 
+2

「代碼中的jsfiddle」 沒有,把它放在這裏。 – BoltClock

+0

@BoltClock:對不起,如果我顯得傲慢或懶惰,事實是我無法粘貼我的代碼。我甚至檢查過http://meta.stackexchange.com/questions/1777/what-html-tags -are允許的-堆棧上交換的網站。 編輯:哇,我似乎無法理解什麼有效,什麼不在這裏。我會在等待幫助時開始閱讀。 –

+0

由字段集介紹的Strage邊界?這是一個荒謬的問題,它消失了嗎? http://jsfiddle.net/9XxsX/1/ – Shouvik

回答

1

這給一個嘗試:用border:none;

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

jsFiddle