The color of the bootstrap button appears incorrect on Chrome browser (Mac) for some reason

I was in need of a grey color for my button, so I opted for the Bootstrap button which helped me achieve my desired look. However, an issue arose when viewing it on Chrome on a Mac system - it displayed a white background instead of grey.

Can someone provide some insight into this matter?

<button class="btn btn-sm" style="font-weight: bold;color: #3f51b5; width: 100px;border: solid 1px black;" data-id="xxxxxxx" data-phase="" data-phases="xxxxxx" data-description="" data-priority="0" data-due="" data-name="TTTTe" data-status="complete" data-assigned="xxxxxx" data-target="#project_actions" onclick="editTask(this,'xxxxxx')"> Edit</button>

Chrome (Linux):

https://i.sstatic.net/1zQP0.png

The grey color is displaying correctly, as intended.

Chrome (Mac):

https://i.sstatic.net/FzAMv.png

A white color is showing up, but I want it to be grey.

Please assist me as I am unable to identify why the white color is appearing on Chrome on a Mac system.

htmlcsstwitter-bootstrapgoogle-chromebootstrap-4

Answer №1

Apologies for the delay in responding. I have managed to discover a resolution for the issue at hand. Specifically for Mac users, we need to utilize -webkit-text-fill-color

Answer №2

By applying the 

style='-webkit-appearance: none!important;'
, I was able to resolve the issue successfully. Everything is functioning properly now.

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 on using Ajax to post in HTML

Here is the code I have been working on: <script type="text/javascript"> var xmlDoc; var xmlhttp; function loadRates() { xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = readRates; xmlhttp.open("GE ...

javascriptjqueryhtmlajax

`Zooming and scrolling feature within a masked image`

I'm struggling to achieve a scrolling zoom effect similar to the website mentioned below, but I can't seem to get it to fully zoom. Additionally, when I try to zoom in on a clipped shape or text while scrolling, the entire div ends up scrolling ...

javascripthtmlcss

Zero results returned for the angularjs script

I am working on enhancing my skills in angularjs, but I am facing an issue where only the categories are being displayed and the products are not showing up. There are no error messages, so I am having trouble pinpointing where the problem lies. Here is t ...

javascripthtmljsonangularjs

The scrollbar remains unresponsive and fixed until the screen size is adjusted

Need some assistance with a website project for a client. The scrollbars on each page are not loading or changing height until the window is resized. I have a jQuery scrollbar in place, but disabling it does not solve the issue as the normal scrollbar beha ...

jquerycsshtmlscrollbar

Tips for center-aligning layouts in Angular Material

I am struggling with the Angular Material flex layout, so I took this directly from the Angular Material website. Based on the documentation for layout container, items are arranged in a row with a max-height of 100% and max-width matching the width of th ...

cssangularjstypescriptangular-materialmaterial-design

Utilizing jQuery to display labels only for selected checkboxes while concealing the ones that are not checked

I currently have the following setup: <style>.selectit{display:none;}</style> <div id="foo"> <label class="selectit"> <input type="checkbox" name="one" id="one" checked> One </label> <label class="selectit"> <i ...

javascriptjqueryhtmlformsinput

Tips on restricting access based on User Browser type and version

I have a question regarding: My web application is built using PHP, AJAX, Javascript, CSS, and other technologies that may not be fully compatible with older browsers. Certain functions and styles might not work correctly on outdated browser versions. Th ...

javascriptphpjquerycssajax

What is the best way to clear validation after submitting a form using AJAX?

My form is validated using HTML5 validation and submitted using AJAX. After a successful submission, the input fields are reset, which is working fine. However, my issue is that even after a valid submission, the HTML5 validation still outlines the empty ...

jqueryajaxhtmlforms

Executing a parent window function from a child window using AngularJS

I'm working on a multi-page/window application where a dashboard page controls a list of children (windows). The dashboard should be able to call functions in the children and vice versa. However, I'm facing an issue where the child fails to invo ...

javascripthtmlangularjs

"Placing a three.js scene within a table: A step-by-step

Is there a way to insert a three.js scene into an HTML table? Specifically, to display a cube in the first column. I attempted the following code, but it was unsuccessful: <body bgcolor="#E6E6FA"> <table style="position:relative; width:100%; bord ...

htmlthree.js

Monochrome Effect Triggered by Cursor Hover

I'm attempting to use Javascript with HTML5 canvas to convert an image to greyscale, but I seem to be missing something in my code. Can anyone spot the error? I feel like I'm very close! function grayscaleConversion(str) { // Access the Canv ...

javascripthtmlcanvasgrayscale

Obscured Background Beneath the Bootstrap Tip

Desired Outcome: I am aiming to achieve a blurred background behind the tooltip element. https://i.sstatic.net/AE1RQ.png Current Status The current state shows that the area behind the tooltip is not blurred as intended. https://i.sstatic.net/bE57E.pn ...

csstwitter-bootstrapbootstrap-5opacitygaussianblur

My vanilla JavaScript code isn't running the smooth scroll function as expected

Struggling to incorporate smooth scroll on Safari using Vanilla js. Despite following the documentation to a tee, the implementation is still not functioning as expected. Outlined below is the vanilla.js code: (function() { scrollTo(); })(); function ...

javascripthtmlcss

Attempting to call a nested div class in JavaScript, but experiencing issues with the updated code when implemented in

Seeking assistance. In the process of creating a nested div inside body > div > div . You can find more information in this Stack Overflow thread. Check out my JSFiddle demo here: https://jsfiddle.net/41w8gjec/6/. You can also view the nested div ...

javascripthtmlcsswordpresswordpress-theming

What could be the reason for the email not being displayed in the form?

I am attempting to automatically populate the user's email in a form when a button is clicked, preferably when the page is loaded. However, I am encountering issues with this process. This project is being developed using Google Apps Script. Code.gs ...

javascripthtmlgoogle-apps-script

What is the best way to dynamically insert columns into HTML code?

This is an example of my HTML code: <div class="row text-center"> <div class="col h4">We Collaborate With:</div> <div class="col">company1</div> <div class="col">company2</div> ...

javascriptjqueryhtmlajax

Discover the following element with a specific class within the AngularJS framework

I need help locating the following tr element with a specific class from the current tr in AngularJS. If the immediate next tr does not have the class "opened", I want to target the next tr with the "opened" class. How can I achieve this in AngularJS? tem ...

javascripthtmlangularjs

Ways to ensure that the dropdown content remains visible even after the mouse has exited the trigger element

There are three buttons arranged in a row, and when one is hovered over, dropdown content appears underneath all three buttons. However, the content disappears when the mouse moves down to it. Unfortunately, images cannot be posted inside yet** https://i.s ...

javascriptjquerycss

Is it possible to utilize the Wicket:id for generating CSS?

Can the wicket:id attribute of an element or component be used for CSS styling instead of the "class" attribute? For example: .tooltipster-arrow span, .column-shifter { display: block; width: 0; height: 0; position: absolute; } Let&apos ...

javahtmlcsswicketstyling

Place an image in a div so that it is centered both vertically and horizontally

I have been trying to center an image both horizontally and vertically, but it seems like my code is not working properly. Here is what I have so far: #parent { position: relative; float: left; width: 700px; height: 400px; overflow: hi ...

csshtmlimage