How to write CSS style for text box like Microsoft signin textbox

Question

1.00/5 (1 vote)

See more:

i tried below but it's not working
i don't want to make top and side no border after i click on text box , please look into microsoft signin page and how textbox is looks like

--
thanks ..

What I have tried:

<!DOCTYPE html>

input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: none;
border-bottom: 1px solid black;
}

input[type=text]:focus{
border-bottom:1px solid #0067b8;
}

Text fields with only a bottom border:

First Name

Last Name

Posted 25-Oct-18 8:13am

Parazival

Updated 25-Oct-18 10:26am

Add a Solution

Comments

Richard Deeming 25-Oct-18 14:26pm

Your CSS works fine for me: Demo[^]

You're going to need to explain what you're actually trying to achieve.

Parazival 26-Oct-18 1:17am

I want the textbox like microsoft signin textbox

Richard Deeming 26-Oct-18 6:49am

If you can't explain what you want, then how do you expect anyone to be able to help you?

Parazival 5-Nov-18 13:53pm

when i click on textbox its showing lightblue border but i dont want to see that blue colour

Richard Deeming 5-Nov-18 15:41pm

Is it doing that on this demo link[^]? Because I can't see it. The only blue border I can see is the dark blue border on the bottom, which you've explicitly told it to show.

If it's not showing on the demo link, then there must be something else in your CSS that's causing it. Try using the browser's developer tools to inspect the element to see where it's coming from.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Zameer Hussain · Answer 1 · 2018-10-25T10:27:00

Try This

input[type=text] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
}

you can set padding though

padding: 5px 5px;

change it as per your page

or may even this can do that

border: 1px solid black;
float: left;
margin: 0;
padding: 0;
border-top: 0px;
border-left: 0px;
border-right: 0px;