Safari iOS does not display any background for Buttons

Encountering an unusual problem with buttons on iOS devices specifically in Safari browser - the background color isn't being applied like it is on Desktop and Android devices. Here are the CSS properties for the button:

export const Button = styled.button`
  display: inline-block;
  color: ${({ theme }) => theme.text.main};
  margin-left: 8px;
  padding: 0 15px;
  height: 32px;
  border-radius: 4px;
  background-color: ${({ theme }) => theme.palette.main};
  font-weight: 400;
  line-height: 1.5;
  font-size: 15px;
  cursor: pointer;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  opacity: 1;
`

https://i.stack.imgur.com/znJ0e.png

cssreactjssafarimobile-safari

Answer №1

If you are incorporating bootstrap .btn classes, consider adjusting the background using CSS by setting a specific background or background-color.

.btn{
  background: #fff;
}

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

Fixing the error "cannot call a function which is possibly undefined" in React and TypeScript

Seeking a resolution to the error "cannot invoke an object which can possibly be undefined" by utilizing react and typescript. What is the issue at hand? The problem arises when using the useContext react hook to create a variable (dialogContext) in compo ...

reactjstypescript

Concealing Images in HTML Without Reserving Space for Them

Our task is to create a website here: I tried hiding elements using display: none; However, I ended up with a large blank space. This is the HTML code: <h1>OUR PORTFOLIO</h1><div class="subtext-top">CLIENT-FOCUSED MEDIA PRODUCTIO ...

jqueryhtmlcss

Subscribe on Footer triggers automatic scrolling to the bottom of the page

Whenever I fill out the form in the footer and hit submit, it directs me to a different page while automatically scrolling back down to the footer. I'm looking for a solution that prevents this automatic scrolling. I've attempted using window.sc ...

javascripthtmlcss

How can I best fill the HTML using React?

After attempting to follow various React tutorials, I utilized an API to fetch my data. Unfortunately, the method I used doesn't seem to be very efficient and the code examples I found didn't work for me. I am feeling quite lost on how to proper ...

javascriptreactjsapi

Tips for resolving the issue of "Text stays in original position while image changes in the background when hovering over the text."

I'm currently working on a website and I have a question regarding how to make text stay in position while hovering over it (inside a span), and at the same time, display an image in the background that allows the text to overlay it. HTML: <ht ...

htmlcssimagebackgroundhover

Having trouble retrieving exchange rates from the state in React after making an API call

import React, { Component } from 'react'; import axios from 'axios'; class SearchCurrency extends Component { constructor() { super(); this.state = { data: {} } } componentDidMount() { axios .get(&apo ...

javascriptreactjsapi

What is the most efficient way to apply multiple values to the css property outline?

Currently, I am working with IE11 to display a dialog box. The default style for the button in focus includes a dotted border. Is there a way to add an additional value for the outline attribute, like shown below: input[type=button]:focus{ outline: 1p ...

htmlcssinternet-explorer-11outline

How to access a particular tab in Bootstrap 5 using an external link

Is there a way to direct users to a specific tab upon clicking a link on another page? Check out the example below: <div class="products-btn"> <a href="products.html#pills-profile">view all</a> </div> On Pro ...

javascripthtmlcssbootstrap-5

Animating path "d" with ReactJS and SVG upon clicking in FireFox

Visit this CodePen for more: https://codepen.io/sadpandas/pen/xxbpKvz const [currentScreen, setCurrentScreen] = React.useState(0); return ( <React.Fragment> <div> <svg className="theSvg" width="156" height="6 ...

javascriptcssreactjssvgonclick

Enhance Your Button with CSS3 Animation

While experimenting with CSS3 animations, I encountered a challenge when trying to apply an animation to a button upon clicking. The desired effect was for the button to zoom in, spin, and then zoom out, giving the appearance of flying off the screen. Surp ...

jqueryhtmlcss

Ensure that an async function's result is resolved before rendering react routes

I've been working on setting up an authentication service in my single-page application using React in the routes file. The goal is to check if a user is trying to access a private path, and verify that the token stored locally is valid. However, I&ap ...

javascriptreactjsreact-router

Show a picture on top of another picture

Is there a way to overlay an image and text on top of another image, similar to what is done on this website ? ...

cssimagetext

express-session is failing to maintain persistence and refusing to transmit a cookie to the browser

I am currently developing a web application using the MERN stack (React, Node.js, Express, and MongoDB). I have integrated express-session in my Node.js project, but for some reason, I cannot see the connect.sid cookie in the browser. Additionally, it appe ...

javascriptnode.jsreactjsexpressexpress-session

Moving Material-UI Grid column overflow to the following row

I'm working on displaying a list of items in a specific format using Material-UI Grid. The desired layout is: item1 item2 item3 item4 item5 item6 Currently, my code generates the items in a single column like this: const display = () => { ...

reactjsflexboxgridmaterial-ui

Enhancing Material UI KeyboardDatePicker with personalized CSS design

Material UI KeyboardDatePicker is the component I'm currently using. https://i.sstatic.net/It50L.png In order to remove the black line visible in the datepicker (as shown in the screenshot), what steps should I take? Displayed below is the code ...

javascriptcssreactjsmaterial-ui

The style of the dataTable can be customized with attributes such as color, background color, border

Is there a way to customize the appearance (such as color, background color, border, hover effects, etc.) of a dataTable using reactjs? Check out this dataTable image for reference. ...

reactjsbootstrap-4datatable

I am unable to utilize the "create-react-app" command due to an issue with npm being unable to locate a specific file

No matter what I try, I just can't seem to get create-react-app to run. I attempted uninstalling node, reinstalling it, using yarn, cleaning the cache, and even creating with "npm init ..." but nothing seems to work. Microsoft Windows [version 10.0.19 ...

node.jsreactjsnpmcreate-react-appnpx

Fade in/out overlay effect when clicking on a content block

I've hit a roadblock while trying to implement overlay fading in and out to cover a block created by some JavaScript code. Here is a link to the project. When you click on any of the continents, a series of blocks with country flags will appear. You& ...

javascriptjqueryhtmlcss

React Router and Error Boundary working together

I've configured my routes to wrap all components with an Error Boundary function renderComponentWithErrorBoundary(Component) { return () => { return ( <ErrorBoundary> <Component /> </ErrorBoundary> ) ...

reactjsreact-router

Tips on sending various properties to makeStyles() using TypeScript

After learning how to pass 1 prop to makeStyle() from a resource, I decided to try passing in 2 props for my project. However, I encountered an error stating cannot find name 'props'. Any assistance on this issue would be greatly appreciated! con ...

reactjstypescriptmaterial-ui