Creating a unique input box using CSS and HTML

Could someone help me achieve an input box like the one shown in the image below?

https://i.stack.imgur.com/XtVNj.png

Since I am new to CSS, I am not sure how to put text inside the border of an input box. Should I style the input directly or create a div with a border and place the text inside that?

Here is my current attempt, although I know it's not ideal:

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

I have tried this but the text doesn't wrap within the border. Any suggestions would be greatly appreciated.

javascriptcss

Answer №1

Give this a try

<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 adds the border, the legend tag displays the name text above the input field. To improve the design and avoid multiple borders when focused, remove the border and outline properties from the input element and adjust the width to fit within the fieldset without looking awkward 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>

Answer №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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing JS Underscore for combining and organizing arrays with common keys

I am facing a scenario where I have two arrays: "array_one": [ { "id": 1, "name": One }, { "id": 2, "name": Two } ] "array_two": [ { "id": 1, "name": Uno }, { "id": 3, "name": Three ...

javascriptarraysjsonunderscore.js

Struggling with CSS Flexbox when it comes to organizing rows and combining Table and Table Cells

I've been struggling to fix a CSS flex problem for hours. My goal is to make sure that the three boxes in each row have the same height. While I'm familiar with using flex, I suspect that floats may be the root of the issue. Even after clearing t ...

cssflexbox

What is the best method for navigating and passing data in dynamic routing with NEXT.JS?

In the process of developing my next.js ecommerce app, I am utilizing Firebase to fetch product data. My goal is to have users click on a product and be redirected to a new page displaying the details of that particular product. However, despite using the ...

javascriptnext.js

Express and Angular2 Webpack integration

Recently, I set up Angular 2 with Webpack and explored its routing capabilities through a sample app. I am now interested in integrating Angular2 for front end routing while utilizing ExpressJS for a RESTful API backend on the same server. For example, ht ...

javascriptnode.jsexpressangular

Error in code - message gets sent immediately instead of waiting for timeout to occur

There seems to be an issue with the code where the message is sent instantly instead of waiting for the specified timeout duration. Based on the code, it should wait for the time mentioned in the message. I'm puzzled as to why it's not functioni ...

javascriptnode.jsdiscorddiscord.js

Can you align a row under its corresponding column in Bootstrap?

Hello, I'm facing a dilemma with my layout. I have a grid consisting of 2 Rows and 4 Columns (col-md-8 & col md-4 in each row). The structure is as follows: Within the container Row 1 Column 1 (md-8) Row 1 Column 2 (md-4) [Accordion] Row 2 Colum ...

csstwitter-bootstrapbootstrap-5

What steps are involved in verifying the data stored in the database?

I need help setting up authorization in PHP. Although I'm not very familiar with it, I have been tasked with implementing this feature. I want the authorization process to occur when a user clicks on a button and then redirect them to another page. I ...

javascriptphpdatabase

Trigger an Ajax request upon user confirmation, which will only be prompted based on the result of a previous Ajax call

Currently, I am facing a challenging issue surrounding asynchronous calls: A specific JQuery function is triggered on user click. This function then requests a PHP file to check if the user input overlaps with existing information in the database. If an o ...

javascriptjqueryajax

Using a background image in CSS

I'm having an issue with this code. It doesn't seem to be displaying anything on the screen: <!DOCTYPE HTML> <head> <title> CSS(lab2) </title> <meta charset="UTF-8"> <style type = "text/css"> ...

htmlcss

Steps to avoid the button being submitted twice

I am facing an issue with two buttons in my code. One button is used to increase a count and the other button is meant to submit the count and move to the next page. The problem is that when I click on the "Proceed" button, it requires two clicks to procee ...

javascripthtmlajax

Koa.js route() isn't a defined function

Recently, I created a basic koa app that should return rss xml based on a tag using a parameter. However, for some reason the middleware is unable to read the router from the router file and I cannot figure out why it's not working as expected. The ap ...

javascriptnode.jsbabeljskoa2koa-router

Adding a CSS link to the header using JavaScript/jQuery

Is there a way to dynamically inject a CSS link located in the middle of an HTML page into the head using JavaScript? <head> ... styles here </head> <body> code <link href='http://fonts.googleapis.com/css?family=Lato:400,300, ...

javascriptjqueryhtmlcss

Issue: The element '[object Object]' is of type 'object', which is not supported by NgFor. NgFor only works with Iterables like Arrays. - Problem encountered in an Ionic Project

I'm currently working on retrieving my user's username from Firebase Firestore Database using Ionic and AngularFire. I have implemented the valueChanges() method to obtain the observable and am trying to process it using an async pipe. However, u ...

javascriptangulartypescriptionic-frameworksingle-page-application

Display a concealed text box upon clicking BOTH radio buttons as well as a button

Below is the HTML code for two radio buttons and a button: <body> <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1"> <label for=&qu ...

javascripthtmljqueryradio-button

The jQuery ajax function seems to be malfunctioning when attempting to send a post request

Having trouble with AJAX? Let me show you my approach to making a POST request to my RESTful service using AJAX: var lat = marker.getPosition().lat(); var lng = marker.getPosition().lng(); //xmlhttp.open("GET","http://192.168.1.100:8080/MapDemo/serv ...

javascriptjqueryajax

Tips for aligning a select and select box when the position of the select has been modified

Recently, I encountered an interesting issue with the default html select element. When you click on the select, its position changes, but the box below it fails to adjust its position accordingly. https://i.stack.imgur.com/SwL3Q.gif Below is a basic cod ...

javascripthtmlcss

Customizing a thumbnail script to dynamically resize and display images according to their size properties

I am attempting to modify a simple JavaScript script that enlarges an image from a thumbnail whenever it is clicked. The issue I am facing is that the enlarged image is displayed based on a fixed width size. I want the enlarged image to be displayed accord ...

javascriptjquery

Retrieving API Data in React Using the MERN Stack

Can anyone help me understand why I'm logging an empty array [] in my console even though I'm getting results from my API? This is my Node.js code: app.get("/todos", async (req, res) => { const todos = await todo.find() res.json(todos ...

javascriptnode.jsreactjsmongodbmongoose

Setting up the propTypes for interface in React TypeScript

How can I specify the correct PropTypes for a property that is an interface in TypeScript with PropTypes? Requirements - Implementing both TS and PropTypes. Goal - To have a more precise type definition than PropTypes.any that meets standard eslint an ...

javascriptreactjstypescriptreact-proptypes

What is the process for modifying JSON attributes with JavaScript?

One JSON data set is provided below: [{ ID: '0001591', name: 'EDUARDO DE BARROS THOMÉ', class: 'EM1A', 'phone Pai': '(11) 999822922', 'email Pai': '<a href="/cdn-cgi/l/em ...

javascriptjson