i've created a contact form with Contact Form 7 Plugin (Wordpress) checkbox but i can't chech them in Safari.
How can i solve it? http://www.r90.ch/contact-form/
CSS:
.myinput[type="checkbox"]{
width: 11px !important;
height: 11px !important;
border: 1px solid #808080 !important; }
Try this code for checkbox style
<style>
.regular-checkbox {
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
}
.regular-checkbox:checked:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0px;
left: 3px;
color: #99a1a7;
}
</style>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" />
Related
I'm trying to achieve a 'press' button effect with a <button> and a <span> but for some reason the shadow is getting cut off on Safari ONLY.
I'm using two tags here because that's a limitation of the website i'm editing, I can't change the markup.
It's simple as this, HTML:
<button><span>A simple fucking button</span></button>
CSS:
button {
-webkit-appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
}
button span {
text-transform: uppercase;
font-weight: bold;
border: 3px solid black;
padding: 10px 35px;
border-radius: 2em;
display: block;
background-color: #fff;
box-shadow: 0px 4px 0px -2px #bfbfbf,
0px 5px 0px 0px black;
}
button:active,
button:hover {
color: inherit;
}
button:hover {
span {
transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
}
codepen.io example:
https://codepen.io/marlonmarcello/pen/dVBKpd
If you are open to dropping the span, then the button and styles can be adjusted to achieve the desired effect:
https://codepen.io/enquiren/pen/qMzLrd
button {
-webkit-appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
&.pushable {
text-transform: uppercase;
font-weight: bold;
border: 3px solid black;
padding: 10px 35px;
border-radius: 2em;
display: block;
background-color: #fff;
box-shadow: 0px 4px 0px -2px #bfbfbf,
0px 5px 0px 0px black;
&:hover {
transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
}
}
<button class="pushable">A simple button</button>
Making a simple web mixing thing, but Chrome doesn't seem to like my CSS for the thumbs on my range sliders. The tracks for them seem to be working well enough (or well enough that I can sort out anything I'm not happy with).
input[type=range] {
-webkit-appearance: slider-vertical;
width: 20px;
height: 80%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 20px;
height: 80%;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #434546;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 40px;
width: 30px;
border-radius: 3px;
background: #ffffff;
-webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #434546;
}
<div class="container">
<input type="range" />
</div>
Most of this came from, but I made a couple of changes: http://danielstern.ca/range.css/#/
Found the solution in a codepen snippet, you have to set -webkit-appeareance: none to the field:
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
background: transparent; /* Otherwise white in Chrome */
}
Whole example https://codepen.io/freoted/pen/bENyzL
This happend to me too, the solution was easy but it make me lost a lot of time investigating why. The solution is put -webkit-appearance: none; in thumb and in the runnable-track, in both. (chrome things I guess)
input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
width: 20px;
height: 80%;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #434546;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 40px;
width: 30px;
border-radius: 3px;
background: #ffffff;
-webkit-appearance: none;
}
This article can help you http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
working the same for me
<!DOCTYPE html>
<html ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">
input[type=range] {
-webkit-appearance: slider-vertical;
width: 20px;
height: 80%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 20px;
height: 80%;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #434546;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 40px;
width: 30px;
border-radius: 3px;
background: #ffffff;
-webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #434546;
}</style></head><body >
<div class="container">
<input type="range" />
</div></body></html>
I have a dropdownlist which is made in HTML5. But it is not taking the CSS in IE 9.
Please see the html for the same.
<div class="lbl-drop">
<label class="lbl">
<div class="dropdown dropdown-dark">
<select class="dropdown-select">
<option selected=""> Date Added: Latest Firt</option>
<option>Short Option</option>
<option>This Is A Longer Option</option>
</select>
</div>
</label>
</div>
The above was the html code,
Please see the CSS for your reference:-
<style type="text/css">
.dropdown:before {
border-bottom-style: solid;
border-top: none;
}
.dropdown:after {
margin-top: 7px;
border-top-style: solid;
border-bottom: none;
}
.dropdown:before, .dropdown:after {
content: '';
position: absolute;
z-index: 2;
top: 9px;
right: 10px;
width: 0;
height: 0;
border: 4px dashed;
border-color: #888 transparent;
pointer-events: none;
}
.dropdown:before {
border-bottom-style: solid;
border-top: none;
}
.dropdown:after {
margin-top: 7px;
border-top-style: solid;
border-bottom: none;
}
</style>
Also some more CSS related to it which I forgot, Sorry
<style type="text/css">
.dropdown-dark {
padding: 4px;
margin: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/* -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; */
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
/* box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; */
background: transparent;
font-family: "Lato-Italic";
font-size: 14px;
color: #a5a5a5;
border: 1px solid #a5a5a5;
outline: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
Let's do it with jQuery as shown below
$(document ).ready(function() {
$("select").after().addClass("color-change-select");
$("select option").after().addClass("color-change");
});
.color-change-select { /* for the select */
color: white;
font-size: 24px;
display: blcok;
position: relative;
border: solid 1px red!important;
background-color: maroon;
}
.color-change { /* for the options */
color: white;
display: blcok;
position: absolute;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option> Date Added: Latest Firt</option>
<option>Short Option</option>
<option>This Is A Longer Option</option>
</select>
Follow this link to see how you can add your own link and get it to always stay at the top
Note: Using jQuery method will help combat browser issues
I am trying to pad the bottom area for the placeholder text, because it is too close to the line. but i am not sure what property is going to work. Here is my css. And also, another problem is that when I open it on firefox, the magnifying icon is about 1 pixel higher than the line. It looks fine on chrome. Does anybody know?
Thanks.
.search_input{
font-family: Helvetica;
font-size:14px;
border:1px solid #000000;
border-top:1px;
border-right: -0px;
border-left: 0px;
margin-left: 3px;
margin-right: -23px;
margin-top: 6px;
width: 150px;
box-sizing: border-box;
}
#tfnewsearch input:focus {
outline: 0;
background: #fff;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
#tfnewsearch input::-webkit-input-placeholder {
color: #999;
font-size: 17px;
padding-bottom:3px;
height: 19px;
}
#tfnewsearch input:-moz-placeholder {
color: #999;
font-size: 17px;
padding-bottom:3px;
}
#tfnewsearch input:-ms-input-placeholder {
color: #999;
font-size: 17px;
padding-bottom:3px;
}
.t_button {
outline: none; cursor: pointer;margin-bottom: -5px; margin-left: 22px;margin-right: 1px; border: solid 1px #000000; border-top:0px; border-left: 1px; border-right: 1px;
}
<form id="tfnewsearch" method="get" action="index.php">
<input type="text" class="search_input" name="q" size="17" maxlength="120" placeholder="Search" required><img src="imgs/icon_search.gif" value="search" class="t_button">
</form>
try to use padding to .search_input
.search_input{
font-family: Helvetica;
font-size:14px;
border:1px solid #000000;
border-top:1px;
border-right: -0px;
border-left: 0px;
margin-left: 3px;
margin-right: -23px;
margin-top: 6px;
width: 150px;
box-sizing: border-box;
padding-bottom:5px;
}
http://jsfiddle.net/yZXSJ/
I have a input field with search icon. When the input field is pressed/focused I want to have a close icon show up on the input box as in the below image
jsfiddle
<div id="search-controls">
<input type="text" class="search-box in-acvtive" placeholder="e.g. restaurant name, cuisine" />
</div>
#search-controls {
height: 68px;
padding: 5px;
}
#search-controls input.ui-input-text {
height: 26px;
background: url('../img/search-icon.png') 99.5% center no-repeat;
background-size: 16px 14px;
border: 1px solid #999;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: inset 0px 5px 10px -5px #BBB;
-webkit-box-shadow: inset 0px 5px 10px -5px #BBB;
box-shadow: inset 0px 0px 5px 10px -5px #BBB;
padding: 6px 5px 0 5px;
margin: 0 0 5px 0;
font-size: 15px;
line-height: 15px;
}
#search-controls input.ui-input-text.ui-focus {
border: 1px solid #9E0249;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: none;
moz-box-shadow: none;
-webkit-box-shadow: none;
background: url('../img/search-active-icon.png') 100% center no-repeat;
}
Try something like this - DEMO
HTML
<div id="header" class="search" data-role="header" data-position="fixed">
<div id="search-controls">
<input type="text" class="search-box" placeholder="e.g. restaurant name, cuisine" />
<span> x </span>
</div><!-- /search-controls -->
</div>
CSS
#search-controls span {
display: none;
position: absolute;
top: 11px;
right: 35px;
height: 22px;
width: 22px;
background: #bbb;
border-radius: 20px;
color: #fff;
font: 400 20px/22px 'Lucida Console', sans-serif;
text-align: center;
border: 1px solid #bbb;
cursor: pointer;
}
#search-controls input.ui-input-text.ui-focus ~ span {
display: block;
}