2014-02-23 82 views
0

我想創建一個下拉登錄表單爲我的網站,我已經在網上找到了一個偉大的教程。一切是知府,除了我周圍的登錄表單域和登錄一個意想不到的邊界按鈕。請參閱該圖像獲得更好的理解..CSS意外邊境

(編輯)對不起,我忘了添加HTML代碼..

HTML

<div id="pageTop"> 
    <div id="pageTopWrap"> 
     <div id="pageTopLogo"> 
     <a href="http://www.google.com"><img src="images/logo.png" alt="UmtBook" title="UmtBook V1.0"></a> 
     </div> 
    <div id="pageTopRest"> 
     <div id="menu1"> 
     <nav> 
      <ul> 
      <li id="login"> 
      <a id="login-trigger" href="#">Log In<span>▼</span> 
      </a> 
      <div id="login-content"> 
       <form> 
        <fieldset id="inputs"> 
         <input id="username" type="email" name="Email" placeholder="Your email address" required> 
         <input id="password" type="password" name="Password" placeholder="Password" required> 
        </fieldset> 
        <fieldset id="actions"> 
         <input type="submit" id="submit" value="Log in"> 
         <label><input type="checkbox" checked="checked"> Keep me signed in</label> 
        </fieldset> 
       </form> 
      </div>   
     </li> 
     </ul> 
     </nav> 
     </div> 
     <div id="menu2"> 
      <div id="set"> 
       <a href="http://www.google.com"><img src="images/home.png" alt="home" title="Umt Book V1.0"></a> 
       <a href="#">Menu_item_1</a> 
       <a href="#">Menu_item_2</a> 
      </div> 
      </div> 
    </div> 
    </div> 
    </div> 

這是CSS代碼。

nav ul { 
    margin: 5; 
    padding: 0; 
    list-style: none; 
    position: relative; 
    float: right; 
    background: #eee; 
    border-bottom: 1px solid #fff; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    width:100px; 
} 

nav li { 
    float: left;   
} 

nav #login { 
    border-right: 1px solid #ddd; 
    -moz-box-shadow: 1px 0 0 #fff; 
    -webkit-box-shadow: 1px 0 0 #fff; 
    box-shadow: 1px 0 0 #fff; 
} 

nav #login-trigger, 
nav #signup a { 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
    height: 25px; 
    line-height: 25px; 
    font-weight: bold; 
    padding: 0 8px; 
    text-decoration: none; 
    color: #444; 
    text-shadow: 0 1px 0 #fff; 
} 

nav #signup a { 
    -moz-border-radius: 0 3px 3px 0; 
    -webkit-border-radius: 0 3px 3px 0; 
    border-radius: 0 3px 3px 0; 
} 

nav #login-trigger { 
    -moz-border-radius: 3px 0 0 3px; 
    -webkit-border-radius: 3px 0 0 3px; 
    border-radius: 3px 0 0 3px; 
} 

nav #login-trigger:hover, 
nav #login .active, 
nav #signup a:hover { 
    background: #fff; 
} 

nav #login-content { 
    display: none; 
    position: absolute; 
    top: 24px; 
    right: 0; 
    z-index: 999;  
    background: #fff; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); 
    background-image: -webkit-linear-gradient(top, #fff, #eee); 
    background-image: -moz-linear-gradient(top, #fff, #eee); 
    background-image: -ms-linear-gradient(top, #fff, #eee); 
    background-image: -o-linear-gradient(top, #fff, #eee); 
    background-image: linear-gradient(top, #fff, #eee); 
    padding: 35px; 
    -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9); 
    -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9); 
    box-shadow: 0 2px 2px -1px rgba(0,0,0,.9); 
    -moz-border-radius: 3px 0 3px 3px; 
    -webkit-border-radius: 3px 0 3px 3px; 
    border-radius: 3px 0 3px 3px; 
    width:100px; 
} 

nav li #login-content { 
    right: 0; 
    width: 270px; 
    height:120px; 
} 

/*--------------------*/ 

#inputs input { 
    background: #f1f1f1; 
    padding: 6px 5px; 
    margin: 0 0 5px 0; 
    width: 238px; 
    border: 1px solid #ccc; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    -moz-box-shadow: 0 1px 1px #ccc inset; 
    -webkit-box-shadow: 0 1px 1px #ccc inset; 
    box-shadow: 0 1px 1px #ccc inset; 
} 

#inputs input:focus { 
    background-color: #fff; 
    border-color: #e8c291; 
    outline: none; 
    -moz-box-shadow: 0 0 0 1px #e8c291 inset; 
    -webkit-box-shadow: 0 0 0 1px #e8c291 inset; 
    box-shadow: 0 0 0 1px #e8c291 inset; 
} 

/*--------------------*/ 

#login #actions { 
    margin: 10px 0 0 0; 
} 

#login #submit {   
    background-color: #d14545; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545)); 
    background-image: -webkit-linear-gradient(top, #e97171, #d14545); 
    background-image: -moz-linear-gradient(top, #e97171, #d14545); 
    background-image: -ms-linear-gradient(top, #e97171, #d14545); 
    background-image: -o-linear-gradient(top, #e97171, #d14545); 
    background-image: linear-gradient(top, #e97171, #d14545); 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    text-shadow: 0 1px 0 rgba(0,0,0,.5); 
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; 
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;  
    border: 1px solid #7e1515; 
    float: left; 
    height: 30px; 
    padding: 0; 
    width: 100px; 
    cursor: pointer; 
    font: bold 14px Arial, Helvetica; 
    color: #fff; 
} 

#login #submit:hover, 
#login #submit:focus {  
    background-color: #e97171; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171)); 
    background-image: -webkit-linear-gradient(top, #d14545, #e97171); 
    background-image: -moz-linear-gradient(top, #d14545, #e97171); 
    background-image: -ms-linear-gradient(top, #d14545, #e97171); 
    background-image: -o-linear-gradient(top, #d14545, #e97171); 
    background-image: linear-gradient(top, #d14545, #e97171); 
} 

#login #submit:active {  
    outline: none; 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
} 

#login #submit::-moz-focus-inner { 
    border: none; 
} 

#login label { 
    float: right; 
    line-height: 30px; 
} 

#login label input { 
    position: relative; 
    top: 2px; 
    right: 2px; 
} 

可有人請查看代碼並指出錯誤......請幫我..謝謝提前....

+1

你」我們必須爲我們提供一些HTML標記.... – HaukurHaf

+0

而不僅僅是共享CSS,很難理解你的HTML結構。 –

+0

是..我現在已經提供的HTML代碼。請看看... – user3343246

回答

1

添加以下CSS類

#inputs { 
border-width: 0px; 
} 
+0

非常感謝@Adel。它的作品就像一個魅力現在..感謝您的幫助... – user3343246

+0

你最歡迎.. – Adel