2014-02-23 47 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