The -moz-use-text-color property does not function properly in Chrome and IE versions 9 and above

I have added -moz-use-text-color for border-color in the following CSS code:

.booksline{

border-image: none;
margin: 0 auto 0px;
width: 96%;
height:220px;
padding:20px 20px 20px 0;
border-width: 1px 1px medium;
border-style: solid solid none;
border-color: #EAE9E9 #EAE9E9 -moz-use-text-color;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
background: #F5F5F5 none repeat scroll 0% 0%;
}

When implemented, the border color shows up as black in Chrome and IE 9+, while it works correctly in Firefox. How can I fix this issue?

Here is a demo of the problem: http://jsfiddle.net/Sambora/4ptokwrh/

htmlcss

Answer №1

Check out this new DEMO: https://example.com/demo

If you're targeting Chrome, remember to use the -webkit-* prefix for specific CSS properties.

For example in Chrome: 

-webkit-border-start-color: transparent;

For Internet Explorer: border-left-color: transparent;

In general, most properties without prefixes work across browsers, so it's best to use them whenever possible.

Make sure to check which properties are supported by different browsers before implementing them.

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

Changing the CSS background in React when updates occur

Currently working on toggling the CSS background image within this React application. The images have been successfully imported and a variable called "image" is set to the imported image as the iteration increases/decreases with each click. The issue I&a ...

cssreactjs

Ajax immediately going to the error section

I'm having trouble with my ajax as it always goes straight to the error part. Below is my code along with comments on the lines I'm unsure about: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script&g ...

javaphphtmlajax

Tips for incorporating a personalized CSS stylesheet while utilizing Bootstrap

When trying to use my custom CSS alongside Bootstrap, I'm running into some issues. The !important tag doesn't seem to have any effect (I've also heard that using !important is not recommended). Additionally, using IDs instead of classes isn ...

htmlcssbootstrap-4

Issue with the flexbox div not fully occupying the vertical space

I can't seem to get flexbox to fill the spaces as I want it to. I've been trying to figure out what I'm missing, but I just can't wrap my head around it. Here's a recreation of the issue with a link to a codepen. I want the div in ...

htmlcssflexbox

Aligning elements vertically in Bootstrap 4 with the power of flexbox

Seeking assistance with a frustrating issue in Bootstrap 4: I tried to implement the align-self-start flexbox alignment using the code from this page . However, the example provided on that page does not seem to work. Is there a simpler way to achieve the ...

twitter-bootstrapcssflexboxbootstrap-4

What could be causing the target to malfunction in this situation?

Initially, I create an index page with frames named after popular websites such as NASA, Google, YouTube, etc. Then, on the search page, <input id="main_category_lan1" value="test" /> <a href="javascript:void(0)" onmouseover=" window.open ...

javascripthtml

PHP and jQuery to create an autocomplete text input feature

I've been working on implementing an auto suggest text box using PHP and jQuery, but it seems like the jQuery code I found online is already deprecated. I'm not sure if my code is incorrect or if the issue lies with the jQuery itself. Can anyone ...

phpjqueryhtml

When utilizing Angular, the mat-datepicker is displayed underneath the modal, even after attempting to modify the z-index

I am encountering a problem with a mat-datepicker displaying below a modal in my Angular application. Here are the key details: Html: <div class="col-12"> <mat-form-field appearance="fill"> <mat-label>Start Date ...

htmlcssangulartypescriptangular-material

Combine various input data and store it in a variable

I am looking for a way to add multiple input text values together and store the sum in a variable. Currently, I can add the values and display it in an id, but I want to assign it to a variable instead. The condition for this variable is described below af ...

javascriptjqueryhtml

After a refresh, jQuery's mousenter event is not functioning

I am currently working on a fun project called Etch-a-Sketch for The Odin Project, and I have a jquery grid that can be redrawn with the click of a button. Initially, the grid allows the user to choose the size and then draw on it using .mouseenter. Howev ...

javascriptjqueryhtmlcss

By using .innerHTML to create an element, the validation of HTML form fields can be circumvented

After inserting a form field with standard HTML validation constraints (pattern & required), using the .innerHTML property does not trigger validation. While I understand the difference between creating an element with .innerHTML and document.createElement ...

javascripthtmlvalidationinnerhtml

Guide to changing the checkbox value using JavaScript

Describing the Parent Element: <span style="background: yellow; padding: 50px;" onClick="setCheckBox()"> <span> </span> <input type="checkbox" name="f01" value="100"> </span> ...

javascripthtmloracle-apex

scrolling smoothly to a specific div on another webpage

Incorporating a smooth scrolling feature on my website's menu bar has been quite challenging. Specifically, I want the page to redirect to another HTML page and smoothly scroll to a specific div when a sub-item is clicked. To achieve smooth scrolling ...

jqueryhtmlsmooth-scrolling

`How to Customize Page Titles and Add Content in WooCommerce`

Currently, I am facing a challenge in adding content after the page title and changing the style of the page where all products are displayed in WooCommerce. Unfortunately, I am unsure about the location of the file that needs to be copied to my custom t ...

phpcsswordpresswoocommerce

Changing the position of a Bootstrap popover dynamically from top to bottom

Struggling with the bootstrap popover here. I can't seem to change the popover position from top to bottom when it reaches the top of the viewport. I attempted to use placement: 'auto bottom' but unfortunately, it didn't do the trick f ...

javascriptjqueryhtmlcssbootstrap-popover

Styling with CSS: I am looking to display images beneath text

I am facing a challenge with displaying an image within a container. The container has a background image with the position set to relative and contains some text. I would like to display another image within this container, with the position set to absolu ...

htmlcssimagez-index

How can you compare input text to the input value attribute using jQuery?

Consider this scenario: the page displays the following input element... <input class="textInput error" id="accountMailaddress" name="user[email]" size="30" type="text" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail=" ...

jqueryhtmlformsinput

Concealing a field when the PHP post is devoid of content

On page1.php, there is a form that, upon submission, redirects to page2.php where the selected information is summarized. The code snippet below on page2.php retrieves this information. I am attempting to dynamically hide certain rows if the PHP post is e ...

javascriptphphtmlforms

Switching from vertical pills to horizontal tabs for smaller screens

I have a vertical pills menu that looks great on large screens, but takes up too much space on small screens. Is there a way to switch it to a horizontal tab layout for smaller screens? I tried searching online for examples but couldn't find any. < ...

csstwitter-bootstrapbootstrap-4

What is the impact on positioning when including a class in Angular?

I've encountered a peculiar bug while trying to add a class to a ui-router element. When I apply the active class, an absolutely positioned element that spans the entire view suddenly snaps to the width of its parent. To see the issue in action, chec ...

cssangularjsangular-ui-router