Custom input box in css html

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, Aug 13 '20 at 07:09
@SandeepTiwari May be doing some [research would have got you the results](https://stackoverflow.com/questions/7731310/text-in-border-css-html) - its takes more time to write a question and less time searching on google. Just FYI. Thank you! — Always Helping, Aug 13 '20 at 07:10
@AlwaysHelping great you are rock, -ve voters are every where among them someone like you — Sandeep Tiwari, Aug 13 '20 at 07:14

David Nithael Torres Lima · Accepted Answer · 2020-08-13T07:28:21.307

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 '20 at 07:28

answered Aug 13 '20 at 07:14

David Nithael Torres Lima

445
2
10

@David great its working, but unable to get it please explain little bit – Sandeep Tiwari Aug 13 '20 at 07:17
2

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset – Roko C. Buljan Aug 13 '20 at 07:21
I tried to add some explanation there – David Nithael Torres Lima Aug 13 '20 at 07:30

Temo Kasaburi · Answer 2 · 2020-08-13T07:17:00.133

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 '20 at 07:17

answered Aug 13 '20 at 07:10

Temo Kasaburi

88
6

thanks for your answer but I need text in border like image. I have done this like text then input box – Sandeep Tiwari Aug 13 '20 at 07:13
This will **not work** if you have for example a form on a gradient background or over an image. – Roko C. Buljan Aug 13 '20 at 07:20
yes your right this wont work on gradient background. I did not even think about it – Temo Kasaburi Aug 13 '20 at 07:23

Custom input box in css html

2 Answers2