Styling input element using only CSS

Question

I want to style the input element as mentioned below.

I did this by removing border property and adding border-bottom alone. But when I am entering text in that, some border is appearing.

How can I remove the border when the input is focused? Is there any way that we can do it using only CSS (like any pseudo element) without using scripting.

<div><span>First Name</span><span class="spacing" style="
    display: inline-block;
    width: 10px;
"></span><input type="text" style="
    border: 0px;
    border-bottom: 1px solid black;
"></div>

Jacob · Accepted Answer · 2015-09-28 14:37:17Z

6

In your CSS, set outline: none; for input elements.

input[type="text"] {
    border: none;
    border-bottom: 1px solid black;
    outline: none;
}

input[type="text"]:focus {
    border-color: pink;
}

<div><span>First Name</span><span class="spacing" style="
    display: inline-block;
    width: 10px;
"></span><input type="text"></div>

edited Sep 28, 2015 at 14:37

answered Sep 28, 2015 at 13:53

Jacob

2,1681 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jayababu Over a year ago

thanks.. :) working great. Any selector that we can use for this scenario..Apart from this I want to change the border-bottom Color when entering text?

user3369753 Over a year ago

You'll want to use the :focus selector.

Jacob Over a year ago

@Jayababu I updated the answer. I moved the input style to CSS and added an attribute selector to narrow it down to text inputs. Also, added the :focus selector to change the border-color.

Collectives™ on Stack Overflow

Styling input element using only CSS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related