Сделать вместо двух бордеров один

@Creativchik · Регистрация: 06.04.2013

HTML5

1
2

<input placeholder="Логин" name = 'login' type="text" pattern="[a-zA-Zа-яА-ЯёЁ0-9]{2,64}" required title="Разрешены только буквы на английской и русской раскладке, а так же цифры" /><br>
<input placeholder="Пароль" name = 'password' type="password" pattern="[a-zA-Zа-яА-ЯёЁ0-9!@#$%^&*)(?|\/}{]{5,12}" required/>

CSS

input[type="text"]
{
    height:30px;
    width:250px;
    margin-top: 5px;    
    font-family: Georgia;
}
input[type="password"]
{
    height:30px;
    width:250px;    
    font-family: Georgia;
}

Есть два инпута по середине у них получается два бордера, я хочу сделать так,что бы остался один общий грубо говоря если сравнивать с таблицей, то

CSS

1	border-collapse: collapse;

так же не работает и

CSS

1	border-top: 0px;

все бордеры просто сдвигаются влево, подскажите как решить эту проблему.
Пощупать можно здесь: https://jsfiddle.net/qqrr6n3q/

@fol · 02.12.2016, 23:53

CSS

input[type="text"]
{
    height:30px;
    width:250px;
    margin-top: 5px;    
    font-family: Georgia;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
input[type="password"]
{
    height:30px;
    width:250px;    
    font-family: Georgia;
  border-top: none;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

@Creativchik · 03.12.2016, 00:31 **[ТС]**

а почему при таргете у верхнего инпута линия тонкая по сравнению с другими?

@Creativchik 0 / 0 / 0 Регистрация: 06.04.2013 Сообщений: 96
	03.12.2016, 00:31 [ТС]	3
	а почему при таргете у верхнего инпута линия тонкая по сравнению с другими? 0

Опции темы