[CSS] input type="text", "password", "email" 꾸미기 border 없애기

html

<table id="inTable" width="100%">
    <tr>
        <td style="text-align: center;">아이디 (*)</td>
        <td>
            <input type="text" name="uid" id="uid" required>
        </td>
    </tr>
    <tr>
        <td style="text-align: center;">비밀번호 (*)</td>
        <td>
            <input type="password" name="upw" id="upw" required>
        </td>
    </tr>
    <tr>
        <td style="text-align: center;">비밀번호 확인 (*)</td>
        <td>
            <input type="password" name="upwcheck" id="upwcheck" required>
        </td>
    </tr>
    <tr>
        <td style="text-align: center;">이름 (*)</td>
        <td>
            <input type="text" name="uname" id="uname" required>
        </td>
    </tr>
    <tr>
        <td style="text-align: center;">나이</td>
        <td>
            <input type="number" name="uage" id="uage" min="0">
        </td>
    </tr>
    <tr>
        <td style="text-align: center;">이메일</td>
        <td><input type="email" name="email" id="email"></td>
    </tr>
</table>

 

css

table{
    background-color: white;
    border: 1px solid #ccd2ee;
}
#inTable td{
    border: 1px solid #ceceee;
}

input{
    height: 25px;
    border: 0;
    border-radius: 5px;
    outline: none;
    background-color: #ccd2ee;
}
input:focus{
    font-weight: bold;
    color: royalblue;
}
input[type="text"], input[type="password"], input[type="email"], input[type="number"]{
    width: 99%;
}

 

결과

 

input:focus에 font-weight를 설정하여 입력하고 있을때는 글씨가 굵게 나온다