Contact Form 7 pure CSS checkbox styling - contact-form-7

I want to style my CF7 checkbox using pure css.
I have placed it within a label and used this code.
.wpcf7-checkbox label input {
position: absolute;
margin-left: 6px !important;
right: 0;
width: auto;
opacity: 0;
}
.wpcf7-checkbox label span.wpcf7-list-item-label:before {
content: '' !important;
border: 2px solid #dbdbdb !Important;
border-radius: 5px !Important;
cursor: pointer !Important;
display: inline-block !important;
float: right !Important;
height: 49px !important;
position: relative !Important;
top: 0 !important;
margin-left: 20px !important;
margin-top: -15px !Important;
width: 48px !important;
}
.wpcf7-checkbox input:checked+span.wpcf7-list-item-label:before {
background-color: #000 !important;
background-image: url(http://test.unknowndesign.co.za/wp-content/uploads/2018/02/checkbox_tick.svg) !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 80% !important;
}
Here is the HTML for the checkbox:
<span class="newsletter"><span class="wpcf7-form-control-wrap mailchimp"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first last"><label><span class="wpcf7-list-item-label">Sign up for our newsletter</span><input type="checkbox" name="mailchimp[]" value="Sign up for our newsletter" /></label></span></span></span></span>
But when I click in the checkbox, the checkbox tick doesn't display. What am I doing wrong?

Related

Ionic 3 Changing ion card header padding is not overriding the existing one

I am trying to override existing sass styling of ion-card, by changing the headers padding to something that fit my app.
I did the following:
ion-card-header{
.card-header-md{
padding-right: 20px !important;
padding-left: 16px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
But nothing changed. I tried to add a background color to check it is getting the styling:
ion-card-header{
color: red;
.card-header-md{
padding-right: 20px !important;
padding-left: 16px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
And the color changed to red. But the card-header-md is not changing. I need to change it on iOS and Android.
Here is a stackblitz for it.
The issue is that the card-header-md class is at the same level as the ion-card-header class. So this should work:
ion-card-header {
&.card-header-md {
padding-right: 20px
padding-left: 16px;
padding-top: 16px;
padding-bottom: 16px;
}
}
I've removed the !important because I think you don't actually need them (just tried in a new stackblitz demo and it's working fine without them).

featherlight.js: How to make nextIcon and previousIcon always visible

I succesfully implemented featherlight.js plugin on my wordpress blog to display some photos as a lightbox.
By default featherlight.js shows up the nextIcon and previousIcon only when the mouse hovers a certain area of the image.
But I would like the nextIcon/previousIcon to be always visible outside of the image when the lightbox is invoked.
Made some tests with "span.featherlight-next" resp. "span.featherlight-previous" so that the left/right icons are outside of the image...but until now I didn't find out how to do it.
Does someone know how to modify the CSS file so that the nextIcon and previousIcon to be always visible ?
Any help is greatly appreciated.
Thank you for your answer. Well, I came up with a solution which satisfies my needs. In fact I just moved the previous/next navigation icons inside the border of .featherlight-image, and the icons just are just visible on a mouse hover (which is the default).
First I set a bigger white border to the image:
.featherlight .featherlight-image {
max-width: 100%;
border: 32px solid #fff;
}
then I fine tuned .featherlight-next & .featherlight-previous and it's span classes based from featherlight.gallery.css, like this:
.featherlight-next,
.featherlight-previous {
display: block;
position: absolute;
top: 25px;
right: 0px;
bottom: 0;
left: 80%;
cursor: pointer;
/* preventing text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* IE9 hack, otherwise navigation doesn't appear */
background: rgba(0,0,0,0);
}
.featherlight-previous {
left: 0px;
right: 80%;
}
.featherlight-next:hover,
.featherlight-previous:hover {
background: rgba(0,0,0,0.0);
}
.featherlight-next span,
.featherlight-previous span {
display: none;
position: absolute;
top: 50%;
width: 80%;
font-size: 22px;
line-height: 50px;
/* center vertically */
margin-top: -40px;
color: #777;
font-style: normal;
font-weight: normal;
text-shadow: 0px 0px 3px #888;
}
.featherlight-next span {
right: 7px;
left: auto;
text-align: right;
}
.featherlight-previous span {
right: 0px;
left: 7px;
text-align: left;
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
/* Hide navigation while loading */
.featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next {
display:none;
}
Putting the background to white could also help hiding the white image border / frame so that the navigation icons are more distinctive when hovering:
.featherlight:last-of-type {
background: rgba(255, 255, 255, 0.6);
}
Hope this helps someone ;-)
Check the source. You'll find how the hide/show is achieved:
.featherlight-next span,
.featherlight-previous span {
display: none;
// ...
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
So you simply need to override the display: none with your own custom rule.

I am trying to make CSS work on mobile browsers

My CSS is working perfectly fine on Google Chrome, Mozilla, and Opera. I have also tried Internet Explorer but that was a bust - Not that it matters.
My biggest issue right now is getting my CSS to work correctly on mobile safari (and other smartphone browsers like android).
HTML:
.load-more {
background-color: #00aa00;
color: #ffffff;
display: block;
font-family: 'Numans', sans-serif;
font-weight: lighter;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 3em;
text-align: center;
text-decoration: none;
transition: all .2s ease, background-color .01s ease, color .01s ease;
border-bottom: none;
}
.load-more.load-more--loading {
animation: rotate 1.5s linear infinite;
animation-delay: .2s;
background-color: transparent;
border: .3em solid #e1e1e1;
border-radius: 1.5em;
border-top-color: #00aa00;
box-sizing: border-box;
height: 3em;
color: transparent;
padding: 0;
pointer-events: none;
width: 3em;
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
<form action="stats.php" method="GET">
<div class="group">
<input type="text" name="player" autocomplete="off"><span class="highlight"></span><span class="bar"></span>
<label>USERNAME</label>
</div>
<center>
<input type="submit" value="CHECK STATS" class="load-more">
</a>
</center>
</form>
The CSS (and a javascript file that I'm using) turn the button into a loader when you click on it, but on mobile browsers like safari the button just disappears when you click it with no loader.
Example: https://epicmc.us
There's some support in iOS 7 and 8 for transform but none for animation in iOS. You're going to have to use jQuery or something to get the effect to work in mobile safari. Caniuse.com tells us the support here for these attributes: http://caniuse.com/#search=transform
This CSS works perfectly on mobile safari...
.load-more {
background-color: #00aa00;
color: #ffffff;
display: block;
font-family: 'Numans', sans-serif;
font-weight: lighter;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 3em;
text-align: center;
text-decoration: none;
border-bottom: none;
}
.load-more.load-more--loading {
background-color: transparent;
border: .3em solid #e1e1e1;
border-radius: 1.5em;
border-top-color: #00aa00;
box-sizing: border-box;
height: 3em;
color: transparent;
padding: 0;
pointer-events: none;
width: 3em;
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}

iPhone Vs browser : CSS for right align clear icon in text box

I have seen same kind of issues in stack overflow itself. Still asking it because I am facing the following issue.
I have a textbox which has a clear icon on the right side.
And in the textbox there is a smartfill (autofilling data).
Need this to work fine in desktop browser / iphone browser / or in any mobile browser. !
HTML
<div class="outerWrapper">
<div id="mainContainer">
<label>Smartfill box
<span class="ui-icon-delete"></span>
<input type="text" placeholder="" onkeydown="smartfill()" autocomplete="off" />
<div id="smartFill1" class="smartFillBox">
<li><div>first</div>starts here</li>
<li><div>Second</div>Goes here</li>
<li><div>Third</div>Goes here</li>
<li><div>Fourth</div>Goes here</li>
</div>
</label>
</div>
</div>
CSS
/* Main css --------------------*/
.outerWrapper label input[type="text"], .outerWrapper label input[type="url"], .outerWrapper label input[type="email"], .outerWrapper label input[type="password"], .outerWrapper label input[type="tel"] {
margin-top: 0.3em;
padding: 0;
}
input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="tel"] {
-moz-appearance: none;
border: 1px solid #CECECE;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 4px 8px #E1E1E1 inset;
display: block;
font-size: 20px;
margin: 0;
min-height: 40px;
width: 98%;
}
.outerWrapper label {
display: block;
font-size: 16px;
padding-bottom: 7px;
}
#mainContainer {
font-size: 14px;
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
}
/* site css --------------------*/
.ui-icon-delete {
background-attachment: scroll;
background-image: url("http://www.autoweek.com/assets/losangeles/closeButton.png");
background-origin: padding-box;
background-position: 0 50%;
background-repeat: no-repeat;
cursor: pointer;
display: none;
float: right;
height: 29px;
margin: 0 3px;
padding: 0;
position: relative;
right: 0.3%;
top: 36px;
width: 4%;
display: inline;
}
.smartFillBox {
height: 50px;
margin: -1px 0 0;
width: 98%;
display: block;
}
.smartFillBox li {
border-bottom: 1px solid #CECECE;
border-left: 1px solid #CECECE;
border-right: 1px solid #CECECE;
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
JsFiddle link for my issue is here : http://jsfiddle.net/smilyface/ze3sA/
Here is a related link: http://jsfiddle.net/PJZmv/801/
I have 3 elements. 1)input-text-box 2)clear-icon 3)smartfill-div. I am not able to relate these three accordingly! I tried jsfiddle-related-link(given above) still I am getting the same issue. Not able to align correctly.

How to hide gwt-dialog box border completely?

How could I hide border of dialog box in GWT completely or we can say that hide the dialog box's caption portion completely. I tried to use .gwt-DialogBox .Caption {} in css
but I couldn't find any option which could hide the border fully.
Thanks in advance!
Don't use gwt-DialogBox name for css to change dialog box. it will not apply. try to apply different style name with same style like:
.gwt-DialogBoxNew
{
border: 8px solid #7F7F7F;
border-radius: 6px 6px 6px 6px;
box-shadow: none;
line-height: 7px;
opacity: 1;
z-index: 1000;
background-color : #FFFFFF;
}
.gwt-DialogBoxNew .Caption {
background: none repeat scroll 0 0 #E4E4E4;
border: medium none #D4D4D4;
cursor: default;
font-family: Arial Unicode MS, Arial, sans-serif !important;
font-size: 18px;
font-weight: 400;
line-height: 27px;
padding:2px 0px 0px 0px;
}
.gwt-DialogBoxNew .dialogContent {
}
.gwt-DialogBoxNew .dialogMiddleCenter {
padding: 3px;
background: white;
}
.gwt-DialogBoxNew .dialogBottomCenter {
}
.gwt-DialogBoxNew .dialogMiddleLeft {
/* background: url(images/vborder.png) repeat-y -31px 0px; */
}
.gwt-DialogBoxNew .dialogMiddleRight {
/* background: url(images/vborder.png) repeat-y -32px 0px;
}
.gwt-DialogBoxNew .dialogTopLeftInner {
width: 10px;
height: 8px;
zoom: 1;
background: none repeat scroll 0 0 #E4E4E4;
}
.gwt-DialogBoxNew .dialogTopRightInner {
width: 12px;
zoom: 1;
background: none repeat scroll 0 0 #E4E4E4;
}
.gwt-DialogBoxNew .dialogBottomLeftInner {
width: 10px;
height: 12px;
zoom: 1;
}
.gwt-DialogBoxNew .dialogBottomRightInner {
width: 12px;
height: 12px;
zoom: 1;
}
.gwt-DialogBoxNew .dialogTopLeft {
/* background: url(images/circles.png) no-repeat -20px 0px;
-background: url(images/circles_ie6.png) no-repeat -20px 0px; */
background: none repeat scroll 0 0 #E4E4E4;
}
.gwt-DialogBoxNew .dialogTopRight {
/* background: url(images/circles.png) no-repeat -28px 0px;
-background: url(images/circles_ie6.png) no-repeat -28px 0px; */
background: none repeat scroll 0 0 #E4E4E4;
}
.gwt-DialogBoxNew .dialogBottomLeft {
/* background: url(images/circles.png) no-repeat 0px -36px;
-background: url(images/circles_ie6.png) no-repeat 0px -36px; */
}
.gwt-DialogBoxNew .dialogBottomRight {
/* background: url(images/circles.png) no-repeat -8px -36px;
-background: url(images/circles_ie6.png) no-repeat -8px -36px; */
}
Remove border style from it as you concern here.
A DialogBox is basically a DecoratedPopupPanel with a caption. You want neither the decoration nor the caption, so how about using a PopupPanel instead? (AFAICT, the only difference will be how you size the panel)