Scroll horizontally through the number field in Chrome

I have configured a number input field with the text aligned to the right.

Scenario:

While testing, I discovered that selecting the entire text or using the middle mouse button to scroll within the input field allows for a slight leftward scrolling of about 1px. This behavior seems specific to Chrome.

You can observe this issue by examining the following code:

<input type="number" value="15" style="text-align: right;" />

Possible Solution:

One approach could be to disable scrolling on the element, but I am interested in knowing if there is a more elegant fix available. Feel free to review the code here: http://codepen.io/anon/pen/mEmAvz

javascriptjqueryhtmlcss

Answer №1

To achieve this effect, you can utilize text-indent along with calc in your CSS code:

html {
 box-sizing: border-box;
}

*, *:before, *:after {
 box-sizing: inherit;
}

input {
  width: 100%;
  text-indent: calc(100% - 1.5em);
  font-size: 1em;
}

Check out the demo on this link

Answer №2

I'm not sure I fully grasp your request, but this might be what you're looking for: 

<input type="number" style="text-indent: calc(100% - 1.5em);" />

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

Tips for managing the output of an asynchronous function in TypeScript

The casesService function deals with handling an HTTP request and response to return a single object. However, due to its asynchronous nature, it currently returns an empty object (this.caseBook). My goal is for it to only return the object once it has b ...

javascripttypescriptangular2-services

Tips for resolving the cross-origin resource sharing (CORS) origin error in Jquery when encountering issues with the

Hi Team, I am encountering an error that I cannot resolve. My post method consistently fails when making a REST client request using Visual Studio Code or any other RESTful tool, not just in the browser. jquery.js:9664 POST ->url<- 404 (Not Found) ...

jqueryajaxrestpost

Error: The function clickHandler has been referenced before it was declared or it has already been declared

Since I started using JSLint, I have encountered the common issues of "used before defined" and "is already defined." While I found solutions for some problems, I am currently stuck. Here is a snippet of my code: var foo; foo = addEventListener("click" ...

javascriptjslint

Is there a way to include a minimize button on a MaterialUi Table enclosed in a Paper component for easy table reduction?

I am trying to add a minimize button to either minimize my MaterialUi Table or the Paper component that wraps it. Here is the code I have so far: <TableContainer component={Paper} style={{maxHeight:'inherit', maxWidth:'inherit', boxS ...

htmlcssreactjsmaterial-uicss-tables

Tips for updating the color scheme in your CSS file by making hue adjustments to all colors

I have a CSS file and I am looking to automatically generate multiple color variations of the file by altering the hue, similar to using the "colorize" function in GIMP. I came across a tool that does exactly what I need at , however it does not support t ...

cssshellhue

Tips for avoiding Netlify's error treatment of warnings due to process.env.CI being set to true

Recently, I encountered an issue with deploying new projects on Netlify. After reviewing the logs, I noticed a message that had never appeared during previous successful deployments: The build failed while treating warnings as errors due to process.env.CI ...

javascriptnpmnetlify

What is the best way to set up multiple routes for a single component in React

I am currently using Vue 2 in my project and have set up the following routes: const routes = [ { path: "/suites", component: Home, }, { path: "*", component: LandingPage, }, ]; Now, I need to include an additi ...

javascriptvue.js

Implementing position sticky on a div depending on its content text - step by step guide

If the text inside the .newsDate matches the previous or next .newsDate, I want to make its position sticky when scrolling, until it reaches the next .newsMiddleCont div. What I'm trying to achieve: The same date on multiple news items should s ...

javascripthtmljquerycss

PHP - session expires upon page refresh

I'm in the process of creating a login system for my website and I've run into an issue with updating the navigation bar once a user has logged in. Every time I refresh the page, it seems like the session gets lost and the navigation bar doesn&ap ...

javascriptphpjqueryhtmlsession

Decipher the JSON data for a Facebook cover photo

I am utilizing the Facebook Graph API to retrieve the user's cover picture. By accessing the link provided at , a JSON object containing the picture link is returned. How can I fetch this link using JQuery or JavaScript? Here is my attempt: HTML: & ...

javascriptphpjqueryjsonfacebook-graph-api

The Safari browser displays the mobile-friendly version of the website

Everything appears correctly when looking at the website in Firefox and Chrome. However, Safari is displaying the mobile version of the site instead. I did not make any CSS changes specifically for desktop screens while working on the responsive design for ...

cssmobilesafariscreen

Encountering the error "undefined object" while using the yield keyword in JavaScript

var pi = document.getElementById("pi"); function * calculatePi(){ let q = 1; let r = 0; let t = 1; let k = 1; let n = 3; let l = 3; while (true){ if (4*q+r-t < n*t){ alert(n); yield n; ...

javascripthtmlgeneratoryield

Is there a way to capture real-time console output in an ExpressJS application while a script is running?

I'm facing a challenge in integrating the output of a bash script into an ExpressJS application to then send the data to a client. To address this, I have developed a simplified version of my actual script for testing purposes. My goal is to capture a ...

javascriptnode.jsbashexpressshelljs

Unexpected outcomes in linq.js

Hey there, I have a JSON object named "Faults" that looks like this: "Faults":[{"RoomId":1,"ElementId":173,"FaultTypeId":1,"Count":1,"Remark":""},{"RoomId":3,"ElementId":211,"FaultTypeId":7,"Count":1,"Remark":""},{"RoomId":4,"ElementId":173,"FaultTypeId": ...

javascriptjsonlinq.js

The functionality of session_start() is operating smoothly in Firefox, however, it is experiencing compatibility issues

session_start() seems to be functioning properly in Firefox, but is not working in Chrome. I have placed session_start() at the beginning of a file, yet it still fails in Google Chrome. I have implemented a condition in my code where if the session is se ...

phphtmlgoogle-chromefirefox

Using JavaScript, enter the value into the input field and then redirect the

I'm encountering a minor issue with my contact form and jQuery redirection based on input fields. Everything was working smoothly until I attempted to integrate the redirection into the form validation code. Redirection snippet: $("#signup").submit ...

javascriptjquery

Moving the legend around in vue-chartJS

As someone just starting out with Vue-ChartJs, I've become quite intrigued by this: https://i.sstatic.net/j1S0z.png I'm wondering how to move the legend to the bottom of the graph. Can anyone help me with that? ...

javascriptvue.jsvue-chartjs

Displaying Data Binding in AngularJS through Jquery onClick: Exploring the Possibilities

I am currently working on a personal project and facing a challenge with rendering data binding from AngularJS in jQuery. Here is the code snippet: <div class="claimButton claimActive"> <a href="{{ product.url }}" target="_blank" onclick="sta ...

jqueryangularjs

The NextJs image entered into an endless loop, throwing an error message that said: "The 'url' parameter is correct, but the response from the

I have been using next/image component with next js version ^12.2.3-canary.17 for my current project. The issue I am encountering is that some images are missing from the source directory, resulting in infinite error logs like the one shown below: https:/ ...

javascriptreactjsnext.jsnext-images

Enhancing the Search Bar in Bootstrap 4 Dashboard Template: A Step-by-Step Guide

Recently got my hands on the Bootstrap 4 Dashboard template and decided to enhance it by adding a form to the top search bar. However, I encountered an issue where the search bar shrinks and loses its original design. If you want to check out the Bootstra ...

htmlcssformsbootstrap-4