I am having some problem with a button styling. CSS works perfectly on chrome but not on safari / safari: https://prnt.sc/ku3bhl, chrome: https://prnt.sc/ku3wjj /
Here is the code I am using / I am basically overwriting some of it's styles that it get's from it's plugin:
.popover-markup2215 button {
background: #fff !important;
border-radius: 0px !important;
border-color: #111 !important;
padding: 12px !important;
margin-bottom: -177px !important;
margin-left: 119px !important;
}
example link: https://graveren.mmcreaties.nl/product/iphone-7-telefoonhoesje-ontwerpen-zwart/
Add this CSS.
you need to use -webkit-appearance
.single_add_to_cart_button {
font-weight: 500 !important;
text-transform: lowercase;
border: 2px solid #796eff !important;
box-shadow: 7px 7px 0 rgba(79, 84, 124, 0.4) !important;
background: #796eff !important;
background-image: none !important;
width: 40%;
border-radius: 50px;
-webkit-appearance: none;
}
As I can see from the dev tools the class name is: .popover-markup2214 and not 2215, or if the class is changing dynamically try to get it like this .cart .trigger.btn
Related
There is an embedded form on this WordPress page (by a third party plugin, Genoo) in which I'm trying to re-style. All has gone well aside from the submit button at the bottom. The button should have white text with a black background.
https://lfccworkforce.com/funding-options/fastforward/
It displays fine in Chrome:
Chrome Sreenshot
But in Safari it does not:
Safari Screenshot
I appreciate everyones help!
e.genooForm {
all: unset;
}
.genooForm label {
font-size:.9em;
font-weight: bold;
font-family: Arial, Sans-Serif;
}
.genooForm input.ext-form-input {
border: solid 1px #757575;
width: 100%;
border-radius: 5px;
margin-bottom: 15px;
}
.gn-component--selected {
all: unset;
width: 30% !important;
margin: auto !important;
}
.gn-btn {
all: unset;
text-align: center;
padding: 10px;
background: #000 !important;
color: #fff !important;
font-size: 1em !important;
font-weight: bold !important;
border-radius: 10px !important;
text-decoration: capitalize !important;
}
.gn-btn:hover {
background:#0176C0 !important;
}
.gn-generated .gn-form .gn-btn {
color: rgb(255, 255, 255) !important;
}
#www139 had the answer:
I suggest removing the all:unset; property. Only Safari 9.1 and later support it. Edge doesn't support it at all. Since it resets properties to initial, Safari might be interpreting that property differently from Chrome and setting the color of the button to its default.
I'm creating Ionic 4 Angular app , in the app i'm using ion-menu to show menu items. how to apply border-top-right-radius and border-bottom-right-radius css properties on ion-menu ? Below image shows what exactly i want. Here is ion-menu documentation link.
yo think this achieves what you want:
global.scss
ion-menu{
--ion-toolbar-background: grey;
ion-list{
border: 2px solid grey !important;
padding: 10px !important;
border-top-right-radius: 25px !important;
border-bottom-right-radius: 25px !important;
background: grey !important;
}
ion-item{
--background: grey !important;
--color: #fff;
}
}
Have you try this?
.ion-item-border {
border-radius: 20px !important;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
}
Im using a div to have a gradient background on a tittle on my weppage.
When using "border" property in CSS the text get pushed out of the div.
I have tried to changue size, take out radius-border etc...
#TextKeyboard {
height: 26px;
width: 330px;
text-transform: uppercase;
text-align: left;
background: -webkit-linear-gradient(#615bff, #262544);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#615bff, #262544);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#615bff, #262544);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#615bff, #262544);
margin-top: 20px;
margin-left: 20px;
padding-left: 10px;
border-radius: 12px;
border: 1px solid;
}
h3 {
color: #f6b824;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
http://jsfiddle.net/t5w7wuay/ here a jsfiddle of my code.
Thanks.
There are predefined styling on some elements, like h3.
To fix your button add this to yout h3 rule:
margin: 0;
padding: 0;
Edit:
Advice: Use a reset.css like you can find here
it clears every predefined style and gives you the full controll of your styling.
Just add margin:0; to your h3 class:
h3 {
color: #f6b824;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
margin: 0;
}
JSFIDDLE: http://jsfiddle.net/ghorg12110/t5w7wuay/1/
I am a css beginner so apologies in advance if I am asking basic questions.
I am using a jquery datepicker in my web application and have an issue with the positioning of the jquery date button. I am using a css framework (yaml) which has a whole set of defined styles for buttons so what I have needed to do is override all the pre-defineed styles.
When I specify the following styles...
button.ui-datepicker-trigger, button.ui-datepicker-trigger:hover {
border: 0px !important;
background-color: transparent !important;
background-color: rgba(0, 0, 0, 0) !important;
background-image:none !important;
border: 0 none !important;
display: inline !important;
margin-left: 5px !important;
box-shadow: none !important;
padding: 0 0.5em !important;
}
The date button is slightly too high and not in line with the input field...
When I fix this and specify the following styles...
button.ui-datepicker-trigger, button.ui-datepicker-trigger:hover {
border: 0px !important;
background-color: transparent !important;
background-color: rgba(0, 0, 0, 0) !important;
background-image:none !important;
border: 0 none !important;
display: inline !important;
margin-left: 5px !important;
box-shadow: none !important;
padding: 0 0.5em !important;
position: absolute !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}
The date button is in line with the next field which is what I want.
BUT after changing the style of the button to use absolute (3 end lines of 2nd css extract above), whilst i am doing a mousepress the date control jumps up about 15 pixeles up the screen.
Has anyone got any ideas on how I might fix this? And a good explanation as to what is happening for my understanding.
thanks
You can try another solution by using the calendar icon inside the textbox.
Check this here :- http://jsfiddle.net/33Xxk/
.tInput_datepick {
width: 250px;
color: #555555;
text-decoration: none;
border-radius: 7px;
padding-left: 7px;
background-image: url(http://www.bay.k12.fl.us/portals/18/Images/calendar_icon.jpg);
background-repeat: no-repeat;
background-position: top right;
background-position-y: -5px;
height: 25px !important;
border: 1px solid #888e9c !important;
background-color: #f4f5f9 !important;
cursor: pointer !important;
}
I have the following CSS:
box-shadow: inset 0px 0px 2px #a00;
Now I am trying to extract that color to make the page colors 'skinnable'. Is there any way of doing this? Simply removing the color, and then using the same key again later overwrites the original rule.
There doesn't seem to be a box-shadow-color, at least Google turns nothing up.
Actually… there is! Sort of. box-shadow defaults to color, just like border does.
According to http://dev.w3.org/.../#the-box-shadow
The color is the color of the shadow. If the color is absent, the used
color is taken from the ‘color’ property.
In practice, you have to change the color property and leave box-shadow without a color:
box-shadow: 1px 2px 3px;
color: #a00;
Support
Safari 6+
Chrome 20+ (at least)
Firefox 13+ (at least)
IE9+ (IE8 doesn't support box-shadow at all)
Demo
div {
box-shadow: 0 0 50px;
transition: 0.3s color;
}
.green {
color: green;
}
.red {
color: red;
}
div:hover {
color: yellow;
}
/*demo style*/
body {
text-align: center;
}
div {
display: inline-block;
background: white;
height: 100px;
width: 100px;
margin: 30px;
border-radius: 50%;
}
<div class="green"></div>
<div class="red"></div>
The bug mentioned in the comment below has since been fixed :)
No:
http://www.w3.org/TR/css3-background/#the-box-shadow
You can verify this in Chrome and Firefox by checking the list of computed styles. Other properties that have shorthand methods (like border-radius) have their variations defined in the spec.
As with most missing "long-hand" CSS properties, CSS variables can solve this problem:
#el {
--box-shadow-color: palegoldenrod;
box-shadow: 1px 2px 3px var(--box-shadow-color);
}
#el:hover {
--box-shadow-color: goldenrod;
}
You can do this with CSS Variable
.box-shadow {
--box-shadow-color: #000; /* Declaring the variable */
width: 30px;
height: 30px;
box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */
}
.box-shadow:hover {
--box-shadow-color: #ff0000; /* Changing the value of the variable */
}
You could use a CSS pre-processor to do your skinning. With Sass you can do something similar to this:
_theme1.scss:
$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.
_theme2.scss:
$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.
styles.scss:
// import whichever theme you want to use
#import 'theme2';
-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;
If it's not site wide theming but class based theming you need, then you can do this: http://codepen.io/jjenzz/pen/EaAzo
A quick and copy/paste you can use for Chrome and Firefox would be: (change the stuff after the # to change the color)
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;
Matt Roberts' answer is correct for webkit browsers (safari, chrome, etc), but I thought someone out there might want a quick answer rather than be told to learn to program to make some shadows.