On iPhone devices, the input field will display a background color at its conclusion

Currently, I am experiencing an issue with my website when accessed on iPhone devices. The input fields are displaying a background color at the end of the field which overlaps the input area.

The CSS code that has been implemented for these input fields is:

.digit-group input, .otpdigit-group input {         
        -webkit-appearance: none !important;
        -webkit-border-radius: 0;
        -moz-appearance: none !important;
        appearance: none !important;          
        width: 17px;
        height: 17px !important;
        border: none;
        line-height: 17px;
        text-align: center;
        font-size: 13px;
        float: left;
        margin-right: 1px;
        box-shadow: none !important;
    }

However, the button is not rendering as expected on iPhone devices. The OTP text is not being displayed properly due to the overlapping background colors at the end of the input fields.

This issue seems to be specific to iPhone devices only. You can view how it renders by following this link: https://i.sstatic.net/Pmoz4.png

cssbootstrap-4

Answer №1

Could it be that the input has a type="button?

It seems like buttons come with default padding unless specified otherwise, not just on iPhones.

Maybe you can try adding: padding: 0 (optionally important)
... and for experimentation purposes, maybe also try setting the width to width: 30px.

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

Upon page load, a dazzling SVG file will flicker before being adorned with CSS styles

I'm experiencing an issue with an SVG arrow icon on my webpage that flashes quickly across the entire screen upon page load before settling into its proper size and placement. I've tried using CSS to initially hide the icon and then reveal it aft ...

javascriptjqueryhtmlcss

Certain issues arise when adjusting the padding within the background color of solely the inline text element

Appreciate your time. I'm working on adding background color to the TEXT exclusively, and have successfully done so by styling .post-title { text-transform:capitalize; margin-top:4px; margin-bottom:1px; font-size:22px; background-color:#FFF; dis ...

htmlcssbackground

Create an animation that transitions a line from 0% width to 100% width, moving from left to right

Desiring to create a pseudo-element line that expands from left to right across its container, then contracts from right to left back to zero width. Note: in my JavaScript code, I apply the "underlined-animated" class after a specific timeout. I've e ...

csscss-animationspseudo-element

The process of dynamically adding buttons in Summernote with the inclusion of a parameter

Currently, I am working on developing dynamic custom buttons for my summernote wysiwygs. However, I have encountered an issue. My goal is to pass the data that I am iterating through to the button's render function. Unfortunately, since the context is ...

javascriptbootstrap-4wysiwygsummernote

Exploring the concept of utilizing CSS modules within React: What is the proper technique for passing a className as a prop to

When working with CSS Modules in a React component, how can I pass a className that includes the hash generated css module name? Currently, it only provides the className itself, like this: <div className={styles.tile + ' ' + styles.blue}> ...

cssreactjswebpack-style-loadercss-modulescss-loader

Issues with importing Reactstrap styles in React version 16.8

Required Tools: React 16.8.3 reactstrap 7.1.0 Despite following the guidelines provided on https://reactstrap.github.io/, I am encountering errors. I have come across a possible solution on their GitHub page: { test: /\.css$/, loader: 'style-l ...

reactjsbootstrap-4reactstrap

How to dynamically assign a CSS class to the parent <li> element when a radio button is selected using JavaScript

I am facing a challenge with a form that includes multiple series of input fields created dynamically by a plugin. The structure of the code is as follows: <!-- section 1 --> <div> <ul> <li> <input type=" ...

javascriptjqueryhtmlcss

One cool CSS trick: altering a div's background color with hover!

I'm working on creating a div that acts as a link to another page. My goal is to have the entire background color of the div change to blue when someone hovers over it. I want to achieve this effect using CSS only, as I am not sure if javascript will ...

htmlcss

Issue with Swipe Gesture functionality in Bootstrap 4 carousel

I recently constructed a website using Bootstrap 4.0 and Dreamweaver, featuring multiple carousels. Despite adding the data-touch=”true” attribute to the code, I am facing an issue where the swipe gesture does not work on mobile devices. I am uncertain ...

mobilebootstrap-4carouselswipe

Steps for adjusting the position of this div in relation to the main container

Apologies in advance for my lack of HTML skills. I am struggling with a page layout issue. I have a website at . When the window is resized, the ads div on the right side overlaps the main container. What I would like to achieve is to make this ads div re ...

javascriptjqueryhtmlcss

Tips for creating a responsive React Monaco Editor:

I'm currently working with react-monaco-editor and having trouble making it responsive. The component has a fixed height and width, so when I resize the screen, the width stays the same. <MonacoEditor width="1200" height=& ...

htmlcssreactjsmonaco-editor

Set the central axis of rotation directly in the middle

I have implemented an animation to rotate an element, but the issue is that the text within the div does not rotate from the center, causing it to appear a bit wobbly. Is there a way to ensure that the center point of the rotation is in the middle of the ...

javascriptcssanimationrotation

Using Vue to display components within a collapsible accordion component

I'm currently working on a project involving multiple accordion expandable drop-downs. Here is a rough example of what I am dealing with: https://i.sstatic.net/igvrU.png Each step within the accordion should load a different component when expanded. ...

javascriptvue.jsvuejs2bootstrap-4components

I desire for my primary content to cascade over my jumbotron within Bootstrap

I am attempting to create a design where my main container slightly overlaps on top of my jumbotron. I have experimented with the "my, mb, py, pb" properties, but have not achieved the desired overlap. <div class="jumbotron jumbotron-fluid"> ...

htmlcssbootstrap-4

The issue of slides overlapping in a Javascript slideshow during auto play mode

I encountered an issue while creating an automatic slideshow with 4 slides. Upon autoplay for the first time, slide 1 overlaps slide 4, as well as slide 2 and 3. This only happens once after the site loads. However, on subsequent playthroughs or when using ...

javascriptjquerycssslideshowoverlapping

My online platform appears fine across all browsers except for Firefox

It seems that different browsers are displaying my website differently. Chrome, Safari, and Opera show it without any issues, but Firefox removes the top section, including the menu, and replaces it with white space in the center. I'm not sure what&ap ...

htmlcssfirefoxbrowsercross-browser

Flexbox design that adapts responsively to display 3 items per row, shifting to 2 items and finally

I have a segment with six elements. For desktop, I would like to display 3 items per row; for medium devices, 2 items per row; and for mobile devices, only 1 item per row. <div class="flex-container"> <div>1</div> <div>2</d ...

htmlcssflexbox

The background color of the Bootstrap 5 navbar remains static and does not transition when scrolling

I'm currently developing an Angular application using Bootstrap 5. One of the features I am working on is a transparent navbar that should change to a dark color when the page is scrolled. However, I seem to be encountering an issue where the navbar r ...

javascripthtmlcssbootstrap-4

Guide to activating the 'Next' button on WP Forms using JavaScript code when certain conditions are fulfilled

Is there a way to adjust the JavaScript code provided so that the visibility of the "Next" button is dependent on whether at least one item in the 'wpforms-icon-choices-item' class has the '.wpform-selected' class on the current page or ...

javascripthtmlcsswordpresswpforms

Regular expression for matching a CSS definition that includes a specific name and value

Looking to match all CSS definitions with the name "test" and color set to gray? Here are a few examples: a.test { color: grey; } or .test { color: grey; }, as well as a.test:after, a.test { font-size: 10px; color: gray; } It's important to consider ...

cssregex