The box-shadow with "inset" is not compatible with iOS devices

Can anyone help me figure out why

box-shadow: inset 0 0 0 5px rgba(26, 60, 88, 0.9);
is not working on an input field in iOS? Any suggestions or solutions would be greatly appreciated!

Thank you!

Answer №1

If you're experiencing issues, it could be due to the blur radius being set to 0px.
In certain cases, older versions of Safari may not support box-shadow if the blur radius is set to 0px.

Hopefully, this information helps with your problem.

"Safari 6, iOS 6 and Android 2.3 default browser don't work with a 0px value for "blur-radius".

For example, -webkit-box-shadow: 5px 1px 0px 1px #f04e29; won't work, but

-webkit-box-shadow: 5px 1px 1px 1px #f04e29 will.""

You can find more information at http://caniuse.com/#feat=css-boxshadow

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

The positioning in CSS is not functioning as expected in a customized component

https://codesandbox.io/s/71j1omvz66 Struggling to shift the chat component to a new position. Any ideas on how to make it move? ...

Activate the mouseenter event as soon as an animated element makes contact with the cursor

As I venture into the world of web development, I am currently working on creating a game where the main objective is to avoid touching moving circles with the cursor. My approach involved using a mouseenter event as shown in the JSFiddle example below: $ ...

Chart showing a Google Timeline: Allow for each bar to be colored differently when there are multiple bars on the same line

It appears that the Google Timeline charts have a feature to color individual blocks on the timeline as indicated in the documentation at However, there seems to be an issue when two bars overlap on the same line, which is evident in this fiddle: http://j ...

The iOS today widget is visible solely during the debugging process

Currently, I am in the process of developing an app using Swift that includes a today widget for the notification center. After testing, here is what I have found: The widget functions properly when using the simulator. The widget also works when initia ...

Issues with the CSS in our unique eBay template are creating some challenges

Our team is currently in the process of creating a customized template for our eBay listings. eBay provides users with the option to upload a description as HTML code and allows the code to link external CSS files. When uploading HTML code on eBay, it ap ...

Customize the appearance of Angular components by altering their color schemes

When working on my project, I often utilize pre-made Angular components. However, some of these components come with colors that do not align with the overall aesthetic of my project (refer to image above). To rectify this issue, I am looking to replace t ...

Issue with top-level navigation menu dropdown functionality

I am experiencing an issue with a dropdown menu that has top level and two sub levels. The problem is that while the sub levels function correctly when clicked, the top level does not navigate to the intended page upon clicking. var menu_Sub = $(".men ...

Preventing PCs from accessing a specific webpage: A step-by-step guide

I am currently using the code below to block phones: if { /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i .test(navigator.userAgent)) { window.location = "www.zentriamc.com/teachers/error ...

What is the best way to insert an object into an array after every third object?

Imagine having an array ranging from 0 to 100. let array = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"...."100"] Now, the task at hand is to insert "-" after every set of 3 elements in the array. The desired output should look like this: array = ...

Tips on introducing a random pattern into a Javascript gaming experience

To kick off the game, let's generate a pattern randomly. Follow these steps: -Include a function that generates the pattern. (Hint: JavaScript's Math.random function might come in handy) -Invoke your new function from the startGame function I&a ...

Adjust date selection lines and text color

Does anyone have a solution for changing the line and font color of UIDatePicker without using private Apple APIs? I came across this workaround, but it seems quite messy: datePicker.setValue(UIColor.white, forKey: "textColor") for subv ...

Creating a customized icon scheduling feature with CSS

Creating an icon using CSS that looks like the one below seems to be quite challenging. I attempted to achieve it with this approach, but the result was not satisfactory. https://i.stack.imgur.com/5W7Hj.png .schedule { height: 10px; width ...

Ways to customize the background color of child cells in a table

I've implemented material-table in this UI and I'm currently working on customizing the style of specific cells only when the onTreeExpandChange is true. Essentially, my goal is to change the background color for cells 2 & 3. Check out the s ...

Even after being removed, the input field in Firefox stubbornly maintains a red border

I have a project in progress that requires users to input data on a modal view and save it. The validation process highlights any errors with the following CSS snippet: .erroreEvidenziato { border: 1px solid red; } Here is the HTML code for the moda ...

Creating a fully responsive HTML page with a fullscreen image background

Seeking help from someone who can assist me. I have a challenge in creating a webpage with a background image that fills its <div>. Here is the code I used: <style type="text/css> .myclassdiv { background-image:url('IMAGEURL') ...

Uncertainty surrounding the inherited styling of an element in HTML

I am seeking clarification on the distinction between two methods of writing HTML code: CSS file (applies to both the first and second way): .parent{ color:red; font-style: italic; } .child_1{ color:blue; } .child_2{ color:green; } First approach ...

Disabling Scrolling in AngularJS Material Tab Components

I'm experimenting with AngularJS Material components and struggling with creating tabs. Every time I add a tab, the content inside the child md-content element automatically gets a fixed height with a vertical scrollbar instead of adjusting its heigh ...

Steps for closing the menu by clicking on the link

My issue with the menu on the landing page is that it only closes when clicking the cross button. I want it to close when any link from the menu is clicked. I attempted to add code using querySelector, but it only worked for the home link and not the other ...

Developing a Custom Plugin for Integrating Garmin Mobile SDK

As a developer specializing in hybrid applications using Cordova, I've encountered an intriguing challenge. It seems that creating a Cordova Plugin to integrate the native Garmin SDK for iOS and Android available here is necessary. After going throug ...

What is the best way to align text in the center of a div?

I just created this dropdown menu, but I am encountering an issue. Whenever I resize the div or h4 element, the text ends up at the top. Even after trying to solve it with text-align: center;, the problem persists. Here is a visual representation of what ...