Authentication using a singular input

Struggling to design an input for a verification code with just one input instead of four. However, I am facing some challenges:

  1. The input is not responding correctly when clicked, it's a bit buggy and requires clicking at the end of the input to type anything.
  2. How can I align dashes with the entered numbers so that it works with all numbers consistently and always remains centered and positioned underneath each number? Is there a particular technique for this?
  3. Any recommendations and best practices?

input {
    width: 500px;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #ededed;
    outline: unset !important;
    letter-spacing: 80px;
    text-indent: 105px;
}
.verf {
position: relative;
float: left;
}
.verf::after {
    content: "____";
    position: absolute;
    left: 0;
    bottom: 10px;
    color: orange;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 80px;
    text-indent: 105px;
}
<div class="verf">
<input maxlength="4" value="4578"/>
</div>

htmlcss

Answer №1

Instead of using the underline, consider using a dash with HTML tags. Utilize flex to center them, adjust the letter-spacing and text-indent properties for desired results. While this approach may work, it is recommended to follow best practices by utilizing multiple inputs for better functionality.

input {
  width: 500px;
  height: 50px;
  border-radius: 5px;
  border: 1px solid #ededed;
  outline: unset !important;
  letter-spacing: 69px;
  text-indent: 132px;
}

.verf {
  position: relative;
  float: left;
}

.dash {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  bottom: 8px;
}

.dash span {
  width: 5%;
  height: 3px;
  background: orange;
  display: inline-block;
  margin: 0 5%;
}
<div class="verf">
  <input maxlength="4" value="4578" />
  <span class="dash">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </span>
</div>

Answer №2

Perhaps this information will assist you in meeting your needs

<!DOCTYPE html>
<html>
<head>
    <title>Sample code</title>
</head>
<body>
    <style type="text/css">
        #num1,#num2,#num3,#num4
        {
            width: 4%;
            outline: 0;
            border-width: 0 0 2px;
            border-color: white;
            text-align: center;
        } 
        #num1:hover{
            border-color: blue;
        }  
        #num2:hover{
            border-color: blue;
        }     
        #num3:hover{
            border-color: blue;
        }     
        #num4:hover{
            border-color: blue;

        }          
    </style>

    <center>
        <input id="num1" onmouseover="placeoverChange('num1')" type="text" name="num1" placeholder="1">
        <input id="num2" onmouseover="placeoverChange('num2')" type="text" name="num2" placeholder="2">
        <input id="num3" onmouseover="placeoverChange('num3')" type="text" name="num3" placeholder="3">
        <input id="num4" onmouseover="placeoverChange('num4')" type="text" name="num4" placeholder="4">
    </center>

    <script type="text/javascript">
        function placeoverChange(id)
        {
            var plshldr = document.getElementById(id).placeholder
            document.getElementById(id).onmousemove=function(){document.getElementById(id).placeholder=""};
            document.getElementById(id).onmouseout=function(){document.getElementById(id).placeholder=plshldr};

        }
    </script>    
</body>
</html>

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

Ensure there is a blank space preceding a table only when the table is being physically printed

I am currently in the process of developing a report card system for students in grades K-6. The report card will display specific tables based on the student's grade level. For example, a 5th grader may not have a "Reading Stage" table displayed on t ...

htmlcss

Creating dynamic HTML elements for each section using JavaScript

Is there a way to dynamically add a task (input + label) for each specific section/div when entering the name and pressing the "Add" button? I attempted to create an event for each button to add a task for the corresponding div of that particular section, ...

javascripthtmldomaddeventlistener

The press of the Enter key does not trigger the button

I'm facing an issue with a form that has just one field for user input and a button that triggers some jQuery to hide the login form when clicked. However, pressing enter after entering text causes the page to refresh... I'm starting to think th ...

javascriptjqueryhtml

Preserve content from a hyperlink using JavaScript

How can I store a value to the cache using JavaScript when clicking on an anchor link? The code below sets up the dynamic content: <a align="left" href="projectoverview.html">Test Manager</a> I want to save the text "Test Manager" to the cach ...

javascriptjqueryhtml

Is it possible to incorporate HTML tags within the <template> section of AIML files?

My goal is to create a simple bot using an AIML file. The idea is that I can input a question and the corresponding pattern will be returned from the file. For instance, I have this sample pattern in my AIML file: <category> <pattern>TEST& ...

pythonhtmlartificial-intelligenceaiml

Developing an interactive input tab for user engagement

I'm in the process of developing a web application for my current university workplace. Currently, I am seeking guidance on how to create a dynamic user input form for our website using asp.net and c# in visual studio 2017. I'm struggling a bit w ...

c#htmlasp.net.netvisual-studio

Utilizing vue-router to create two separate navigation bars where only one link is highlighted as active

In my setup, I have implemented two sections with navigation structured as follows: <ul class="navigation-list"> <li v-for="(route, index) in navRoutes"> <router-link :to="route.path"> <span>{{ route.name }}</span> ...

javascriptcssvue.jsvue-router

Using the identical code, Wicked PDF generates distinct reports on separate computers

While utilizing Ruby on Rails to render a PDF using WickedPDF and sending it via email, I encountered an unexpected issue. The same code is present on two separate computers, both with up-to-date versions synced from GitHub. However, the generated PDF repo ...

htmlcssruby-on-railswicked-pdf

What is the best way to extract the src attribute from an image tag nested within innerHtml?

In the developer tools, navigate to console and enter: var x= document.getElementsByClassName('ad-area')[0].innerHTML; x returns: '<a href="/members/spotlight/311"><img class="block-banner" src="https://tes ...

javascripthtmlinnerhtml

How can I modify the custom CSS to adjust the color of a Font Awesome icon?

Hello everyone! I am new to coding and I have a question for the Stack Overflow community. I am trying to customize the color of my Font Awesome icons on the homepage of my WordPress theme (Arcade Pro) using the custom CSS editor. Can anyone provide me w ...

htmlcsswordpressfont-awesome

The addition and deletion of classes can sometimes lead to disruptions in the DOM

I've been struggling to phrase this question for a while now. I'm working on a single-page e-commerce site that operates by modifying the HTML in divs and using CSS along with JQuery to show and hide those divs. My problem arises when, occasional ...

javascriptjqueryhtmlcssdom

overlay the div or image with a translucent color

I have a div containing an image with the results from my database, carefully designed and positioned within each div. However, I would like to highlight certain results by overlaying them with a color. I am seeking a method to achieve this effect withou ...

css

Troubleshooting HTML/CSS problem related to background size adjustment

Struggling with setting a background image on my HTML code. The issue is when I resize the browser, the image either zooms in too much or cuts off part of the website. Is there a way to resize the background image based on the browser window size? Appreci ...

htmlcssimageresize

Seeking guidance on creating an uncomplicated CSS tooltip

Can anyone help me troubleshoot why my CSS tooltip isn't working correctly? I've been trying to create a simple method for tooltips, but they are displaying inconsistently across different browsers. In Firefox, the tooltips appear in random locat ...

csstooltip

What is the best way to showcase a single <ul> list in an infinite number of columns?

Utilizing Django on the backend, I aim to showcase the list below in an unlimited number of columns with overflow-x: auto. <ul class="list"> {% for i in skills %} <li>{{i}}</li> {% endfor %} </ul> Example Result: 1 7 ...

javascripthtmljquerycssdjango

What is the best way to implement a hover effect on multiple rows within an HTML table using Angular?

I am currently working on developing a table preview feature to display events. I previously sought assistance here regarding positioning elements within the table and successfully resolved that issue. Applying the same principles, I am now attempting to c ...

htmlcssangulartypescript

Add a React component to the information window of Google Maps

I have successfully integrated multiple markers on a Google Map. Now, I am looking to add specific content for each marker. While coding everything in strings works fine, I encountered an issue when trying to load React elements inside those strings. For ...

htmlreactjstypescriptgoogle-maps

Personalized Pinterest button to link to a custom URL (Text Link, Image, or Both)

I've been searching for a solution without success. I'm looking to customize the image for my Pinterest (Pin It) button and pin a specific image by URL, not just the current page. Here is the custom link I created: <a href="http://pinterest. ...

htmlcsspinterest

SQL Delete rows from Table

I am dealing with an issue where a table displaying notices has a clear option next to each row, but when the clear button is clicked nothing happens. The setup involves a button that triggers a clear function. What could be causing this problem? <bu ...

phphtml

Notify when the focus is solely on the text box

How can I display an alert only when the focus is on a text box? Currently, I am getting an alert whenever I skip the text box or click anywhere on the page. The alert even appears when I open a new tab. Is there a way to fix this issue? Thank you for your ...

javascriptjqueryhtmltextboxalert