Custom input box in css html [duplicate]

Question

I am trying to get input box like below:

I am new to CSS so I just want to achieve how to put text in border of input box OR I have to make a div with border and put text into border of div.

Here is my current go, I know it not good one but in between

    input {
  display:block;
  width:100%;
  margin:10px 0;
  padding:10px;
  
}

I did that but unable to wrap text with border, any suggestion would be appreciable.

@RokoC.Buljan I am still trying, but unable to pick right approach. Just created above for css. — Sandeep Tiwari
– Sandeep Tiwari, Commented Aug 13, 2020 at 7:09
@SandeepTiwari May be doing some research would have got you the results - its takes more time to write a question and less time searching on google. Just FYI. Thank you! — Always Helping
– Always Helping, Commented Aug 13, 2020 at 7:10
@AlwaysHelping great you are rock, -ve voters are every where among them someone like you — Sandeep Tiwari
– Sandeep Tiwari, Commented Aug 13, 2020 at 7:14

David Nithael Torres Lima · Accepted Answer · 2020-08-13 07:28:21Z

5

Try this

<fieldset>
    <legend>Name</legend>
    <input type="text" name="name" id="name" placeholder="Enter your Name">
</fieldset>


<style>
    fieldset > input{
        border: none;
        outline: none;
        width: 100%;
    }
</style>

Edit:

The fieldset by itself add the border, the legend tag add the name text above the input, and then you will just edit the input element removing the border and the outline properties, to don't ruin the design when focused showing multiple borders, and adjust the width to fit the fieldset and don't look so weird when adding text (see below).

<fieldset>
    <legend>Name</legend>
    <input type="text" name="name" id="name" placeholder="Enter your Name" value="a thousand of values hehe, see the text won't fit the fieldset">
</fieldset>


<style>
    fieldset > input{
        border: none;
        outline: none;
    }
</style>

edited Aug 13, 2020 at 7:28

answered Aug 13, 2020 at 7:14

David Nithael Torres Lima

4372 silver badges11 bronze badges

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

3 Comments

Sandeep Tiwari Over a year ago

@David great its working, but unable to get it please explain little bit

Roko C. Buljan Over a year ago

developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

David Nithael Torres Lima Over a year ago

I tried to add some explanation there

Temo Kasaburi · Accepted Answer · 2020-08-13 07:17:00Z

2

label{
  display:block; 
  position:relative; 
  bottom:-10px; 
  width:fit-content; 
  left:10px; 
  padding:0px 5px; 
  background-color:white;
}
input{
  border:2px solid gray; 
  height: 30px; 
  width:300px;
  padding:5px 10px;
  font-weight:bold;
}

    <form >
        <label for="name">Name</label>
        <input type="text" placeholder="Enter Your Name" name="name" >
    </form>

edited Aug 13, 2020 at 7:17

answered Aug 13, 2020 at 7:10

Temo Kasaburi

886 bronze badges

3 Comments

Sandeep Tiwari Over a year ago

thanks for your answer but I need text in border like image. I have done this like text then input box

Roko C. Buljan Over a year ago

This will not work if you have for example a form on a gradient background or over an image.

Temo Kasaburi Over a year ago

yes your right this wont work on gradient background. I did not even think about it

Collectives™ on Stack Overflow

Custom input box in css html [duplicate]

2 Answers 2

3 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Linked

Related