2017-05-25 8 views
2

形で切断されます私が作成したフォームを使用してこの奇妙なグラフィカルグリッチを有しますあなたは見ることができる、それは左の国境がちょうど切断されているように見えます。私は、コードを持って下:テキスト入力境界を(クロムのみと)、私はクロムで

body { 
 
    text-align: center; 
 
} 
 

 
td { 
 
    vertical-align: middle; 
 
    padding: 2px; 
 
} 
 

 
#login-table td:nth-child(1) { 
 
    text-align: right; 
 
} 
 

 
#login-table input { 
 
    padding: 2px; 
 
} 
 

 
#login-table { 
 
    margin-bottom: 14px; 
 
} 
 

 
#login { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.required { 
 
    font-weight: bold; 
 
}
<html> 
 
    <head> 
 
     <title>Register</title> 
 
     <link rel="stylesheet" href="styles.css" type="text/css" /> 
 
    </head> 
 
    <body> 
 
     <div id="login"> 
 
      <h2>Administrator Registration</h2> 
 
      <form method="POST"> 
 
       <table id="login-table"> 
 
        <tr> 
 
         <td class="required">Username:</td> 
 
         <td><input type="text" name="username" required/></td> 
 
        </tr> 
 
        <tr> 
 
         <td class="required">Email:</td> 
 
         <td><input type="text" name="email" required/></td> 
 
        </tr> 
 
        <tr> 
 
         <td class="required">Password:</td> 
 
         <td><input type="password" name="password" required/></td> 
 
        </tr> 
 
        <tr> 
 
         <td class="required">Confirm Password:</td> 
 
         <td><input type="password" name="confirm" required/></td> 
 
        </tr> 
 
        <tr> 
 
         <td>First Name:</td> 
 
         <td><input type="text" name="first-name"/></td> 
 
        </tr> 
 
        <tr> 
 
         <td>Last Name:</td> 
 
         <td><input type="text" name="last-name"/></td> 
 
        </tr> 
 
       </table> 
 
       <input type="submit" value="Register"/> 
 
      </form> 
 
     </div> 
 
    </body> 
 
</html>

私は、関連する問題の解決の多くを試してみたが、私はこの問題を離れて行くようそのいずれかを見つけることができません。助けてください!ありがとう!

+0

面白い... Chromeで自分のパソコンで試したところ、完全に機能しました。実際に問題があると確信していますか? –

答えて

0

ためborderを追加します。

#login-table input { 
    padding: 2px; 
    border-width: 1px; 
    border-style: solid; 
} 
0

あなたはこの方法でそれを行うことができますinput

#login-table input { 
    border: 1px solid #f00; 
    padding: 2px; 
}