Creating an input field with two entries positioned on opposite sides

Is it possible to create an input field with two fixed and predefined entries on opposite sides? I want to have the placeholder "Name" on the left side and the placeholder "Michael" on the right side of the input field. The text should start from the right when the user begins typing, but the placeholder "Name" should always remain visible.

For example:

[Name:------------------Michael]
[Last name:--------------Dawson]
[City:-----------------New York]

The user will provide information such as 'Michael', 'Dawson', and 'New York' by typing them in.

Prior to the user entering any text, the layout should look like this:

[Name:-------------------------]
[Last name:--------------------]
[City:-------------------------]

As the user starts typing, their input will begin from the right side.

[Name:-----------------------Mi]
[Name:---------------------Mich]
[Name:------------------Michael]

Can this functionality be achieved using just HTML/CSS?

Answer №1

Demo.
Utilizing CSS, achieving this effect is a breeze:

.first{
    border:1px solid black;
    border-right:none;
    width:120px;
    padding-left:4px;
}

.second{
    border:1px solid black;
    border-left:none;
    width:300px;
    text-align:right;
    padding-right:4px;
}
input:focus{
    border:1px solid black;
    box-shadow:0px 0px 0px white;
    outline:none;
}
.first:focus{
    border-right:none;
}
.second:focus{
    border-left:none;
   width:300px;
}

HTML:

<input type="text" class="one" placeholder="Name"><input type="text" class="two" placeholder="Michael">

The width:300px; property ensures that the word "michael" appears as if it belongs in a single text box.

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

Using values from an appsettings.json file as href variables in an AMP html: a complete guide

Currently developing an AMP website with the URL www-dev.example.com, directing users to a sign-up page. The sign-up page is hosted on an identity server under the subdomain auth.www-dev.example.com. Now, the goal is to deploy the AMP website to a staging ...

Is it possible to have the Target='_blank' attribute open the link in a new window instead of a new tab?

Is there a way to achieve this? When using Firefox, the link opens in a new tab, which I prefer to avoid users having to adjust settings in their browsers. I am looking for a solution where a pop-up contact form appears whenever a user clicks on 'co ...

How can I create my own custom pagination and sorting features instead of relying on the default ui-bootstrap options?

Can anyone provide assistance with resolving conflicts I am experiencing while using ui-bootstrap? ...

What is the method for connecting to a JavaScript function?

Is there a way to have JavaScript code that creates a sliding div with expanded information when clicking on a text string, and then navigate to that specific page with the text already clicked on and expanded? If so, how could this be achieved? JSFidldle ...

Creating a CSS grid with uniform row heights, each adjusting independently

I'm currently working on creating a CSS grid for a product display. My goal is to have rows with equal heights, but each row should adjust its height based on the tallest column within that specific row. Right now I have all rows set to be the same he ...

Troubleshooting Bootstrap Social Buttons: Background Color and Hovering Challenges

I've been working with Bootstrap to design social buttons for Facebook and LinkedIn. However, I'm facing an issue where setting the background color to white for the buttons doesn't cover them properly. The white background extends beyond th ...

Having difficulty formatting text alignment using CSS

Is there a way to maintain the alignment of text in the output of the 'About' section even when the content changes dynamically? I want the new line to appear just below 'Lorem', but currently, it shifts below the colon(:). Since the le ...

The PhoneGap Camera is throwing an error: "Undefined property 'getPicture'."

My current challenge involves integrating the Camera API into my PhoneGap android app. However, I keep encountering an error that reads "Cannot read property 'getPicture' of undefined". I have extensively searched through StackOverflow answe ...

Troubleshooting spacing and padding problems in Bootstrap 5.2.3's Scrollspy feature

Hello, I'm currently working on developing a new portfolio template that features a list on the left side to guide users through different sections of the page. Utilizing Scrollspy in Bootstrap 5.2.3 has been helpful so far, but I've noticed that ...

Cartify: Your Ultimate Bootstrap Shopping Companion

My goal is to create a shopping cart that looks similar to this: https://i.sstatic.net/McOdf.png However, I am struggling to achieve the design where "Local Delivery" is positioned on the left and the circle with a plus sign inside of it is on the right ...

How can I trigger a function in code.gs to execute a script in an html file when a dialog is opened?

Within my Index.html file, I have a script tag that allows me to execute the code below when I launch the Modal Dialog on Google Sheets using google.run. --Index.html-- <script> function onSuccess(info) { ...add options to select tags... } functio ...

Problem with HTML relative paths when linking script sources

Having trouble with a website I constructed using Angular. The problem lies in the references to javascript files in index.html. The issue is that the paths in the HTML are relative to the file, but the browser is searching for the files in the root direct ...

Find the final element that does not include a particular class

Looking for the best way to identify the last item in a list without a specific class? Learn how to write code that can check for the absence of a class name. $('ul li:last') $('ul li:not(.special)') ...

Determine the closest input value by clicking a specific link

Can you help me with a task involving text inputs and links? <p><input type="text" name="color[]" value="orange" /> <a href="#" class="show-color">color</a><br /> <input type="text" name="color[]" value="purple" /> < ...

Tips for updating the value of the most recently created div in an ng-repeat loop

Within my HTML document, the following code is present: <div ng-repeat="selection in selections" style="margin-left:{{marginLeft}}%;width:{{progress}}%;background-color:{{selection}}"> </div> In my controller, I have implemented function ...

Step by step guide on integrating a Slider into the header bullet point

I have successfully added the Bootstrap 5 website slider and it is working well. However, I am wondering how to position the slider at the top right with bullet points and without the back and previous arrows. Does anyone know the correct way to achieve th ...

What is the method for printing background images/styles without adjusting the browser's page setup?

Is there a method to maintain row striping in the printout like it appears on screen? <div id="test" style="background:#000000; color:#FFFFFF">Black Stripe</div> I would like to create a page with consistent row stripe formatting for printing ...

Adjusting the transparency of one element and rotating another element that are the same size

This issue is driving me nuts: I'm attempting to rotate the border of a circle element and simultaneously adjust the opacity of the circle overlay when a user hovers over it. However, in my current setup, only the opacity changes: <div id="main-c ...

Submission error occurs if file upload is absent

When attempting to submit a form with a file, I encounter issues if the selected file for upload is changed (e.g. renamed) before submitting the form. The form fails to submit. Below is an example of my code: <form action="test.htm" method="post" encty ...

I wish for the form to automatically shut down whenever I click on the (X) icon

I included a close button in my form, but it doesn't seem to be working. Do I need to use JavaScript for this? <button type="button" class="close" data-dismiss="form" aria-label="Close"><span aria-hidden="true">&times;</span>& ...