Как установить input только нижнюю линию

@masterpiece · Регистрация: 01.08.2012

Author24 — интернет-сервис помощи студентам

Доброе время суток! Очень нужна ваша помощь! Мне необходимо реализовать строку ввода как на рисунке. В коде ниже указана обычная рамка border, но если я меняю на border-bottom, то у меня верхняя и левая границы становятся более жирными, а как их вообще убрать? И еще одна проблема с фокусом, мне необходимо задать оранжевый цвет, но в реале когда ставишь курсор в область для ввода текста получается сине-оранжевое сияние, как убрать синий цвет?
Заранее огромное спасибо при оказанной помощи )))

HTML5

            <form method="post" action="">
 
                <input name="fname" placeholder="Ваше имя">
 
                <input name="lname" placeholder="Ваша фамилия">
 
                <input name="email" type="email" placeholder="Ваш e-mail">
 
                <textarea name="message" placeholder="Сообщение"></textarea>
 
                <center> <input id="submit" name="submit" type="submit" value="Submit"></center>
</form>

CSS

input, textarea {
    width:439px;
    height:27px;
    background:#efefef;
    border:1px solid #dedede;
    padding:10px;
    margin-top:3px;
    font-size:0.9em;
    color:#3a3a3a;
}
input:focus, textarea:focus {
    border:1px solid #fb8c00;
}

@cellse · 14.02.2015, 09:04

Это ваша 11 строчка, только я добавил еще :not([type=submit]), чтобы когда на кнопку нажимаешь не появлялась полоса снизу.

CSS

input:focus:not([type=submit]), textarea:focus {
    outline: none;
    border-bottom: 1px solid #fb8c00;
}

	14.02.2015, 09:04