Click here to Skip to main content
14,236,939 members
Rate this:
Please Sign up or sign in to vote.
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;

border-bottom:1px solid #0067b8;

Text fields with only a bottom border:

First Name

Last Name
Updated 25-Oct-18 10:26am
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

Rate this:
Please Sign up or sign in to vote.

Solution 1

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;

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

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100