0

I have created carousel arrows using font-icons and they are appearing as required on Firefox and Chrome on my system even I have checked it on my android and they are showing the same result as red color arrows generated by the font-icons.

But when someone is looking at the website on iPhone in the safari browser it is not showing these buttons properly, instead it is showing blue background and white color arrow on it.

I am using font-icons for generating these arrows in my code and I have thoroughly checked my CSS several times but no luck.

Here is my CSS for these buttons:

body.home .et-pb-arrow-next::before, body.home .et-pb-arrow-prev::before {
color: #ff0000 !important;
display: block !important;
margin-top: -35px !important;
}
body.home #main-content .et-pb-arrow-prev::before {
content: "\25C0" !important;
font-size: 40px !important;
}
body.home #main-content .et-pb-arrow-next::before {
content: "\25b6" !important;
font-size: 40px !important;
}
Mohsin Intazar
  • 23
  • 7
  • Try using 6 digits for 'color'. For example, instead of color: #f00, use #ff0000. See if it will make a difference. – Mugé Sep 21 '15 at 18:55
  • I am already using six digits for the color, the code above was copied from the browser inspector. In my CSS file the code is in 6 digits. But the main issue is the font-icon are not being rendered instead it is rendering blue icons for the carousel. – Mohsin Intazar Sep 21 '15 at 18:58
  • See if this works: http://stackoverflow.com/questions/21400182/safari-css-font-color-issue – Mugé Sep 21 '15 at 19:15
  • It is just for the colors, instead of HEX it says to use RGBA colors. But my main problem is that the buttons are not being rendered properly and in different color as well. I have even applied these RGBA colors for Red color and still getting the same white arrows with light blue background. – Mohsin Intazar Sep 22 '15 at 14:27
  • Other than the RGBA colors, have you tried the following: input[disabled], textarea[disabled], select[disabled='disabled'] { -webkit-text-fill-color: rgba(..); -webkit-opacity: 1; background-color: rgba(); } , as in the link I provided above? I suspect it some default of iphone/safari and probably can be 'un-bugged'. – Mugé Sep 25 '15 at 12:48

0 Answers0