I'm trying add hover, active state to custom back button. custom data-theme is "app-ios" Here is the
`
<div data-role="page" id="main">
<div data-theme="c" data-role="header">
<h3>
Header
</h3>
<a data-role="button" data-rel="back" data-icon="arrow-l" data-theme="app-ios">Back</a>
</div>
<div data-role="content"></div
</div>
`
CSS
/* button background and borders color */
a[data-theme="app-ios"] {
border: none;
}
a[data-theme="app-ios"] .ui-btn-corner-all {
border: 1px solid rgba(0,0,0, 0.4);
-webkit-border-radius: 5px;
background: #ba2669; /* Old browsers */
-webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);
overflow: visible;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* shadows and label color */
/* button background and borders color */
a[data-theme="app-ios"] {
border: none;
}
a[data-theme="app-ios"] .ui-btn-corner-all {
border: 1px solid rgba(0,0,0, 0.4);
-webkit-border-radius: 5px;
background: #ba2669;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);
overflow: visible;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* shadows and label color */
a[data-theme="app-ios"].ui-shadow,
a[data-theme="app-ios"] {
box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;
background-clip: none; -webkit-background-clip: none; -moz-background-clip: none;
color: white;
font-weight: bold;
font-size: 12px!important;
text-transform: uppercase;
top: 5px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0, 0.4);
width: 51px;
}
/* make room for the point */
a[data-theme="app-ios"].ui-btn-left {
left: 14px;
}
a[data-theme="app-ios"].ui-btn-left .ui-btn-corner-all {
padding-left: 5px !important;
}
/* position the DIV that contains the point */
a[data-theme="app-ios"] .ios-tip {
float: left;
left: -10px;
top: 6px;
position: absolute;
-webkit-transform: scale(.7, 1.0);
}
/* apply gradient */
a[data-theme="app-ios"] .ios-tip span {
display: block;
width: 19px;
height: 18px;
border: 2px solid rgba(0,0,0, 0.4);
border-right: 0;
border-top: 0;
/* the gradient color mus be slightly different since the point is within the body of the button */
background: #ba2669; /* Old browsers */
border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px;
/*box-shadow: 0 1px 0 rgba(255,255,255, 0.25); -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25); -moz-box-shadow: 0 1px 0 rgba(255,255,255, 0.25);*/
-webkit-transform: rotate(45deg) scale(.9, .9);
}
Related
I have a custom style input range and I want to have height 0 to support my style -> the idea is to not have any in built style so I can make my slider appear according to a separate span element styles included on top, so for the span element to be visible, my input range custom styles should not be visible at all.
While my idea worked like a charm it is preventing click from working on safari and chrome - on firefox the click still works properly, with height 0.
Is there a way to tweak my input range style such that I can achieve this? Please find my input range styles below:
Css
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 0px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: transparent;
background: rgba(0, 0, 0, 0);
border-radius: 0px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
// background: rgba(13, 13, 13, 0);
background: rgba(0, 0, 0, 0);
}
Html
<input id="scrollbar" class="scrollbar" type="range" min=1 max=24 step="0.01" />
okay I solved the problem! We can provide background transparent. That made the slider clickable!
I found an excellent article on this topic.
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: transparent;
border-radius: 0px;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
}
<input id="scrubber" class="scrollbar" type="range" min=1 max=24 step="0.01" />
** Please run on chrome and safari to test:D
I hope this post helps someone.
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>
I know it doesn't by default, but I'm trying to force it to.
I'm building a button-like anchor that has a solid box-shadow (no blur) to create the illusion of depth, and when hovered it reacts.
Only problem is that it reacts only when the cursor is above the anchor itself, and since it moves a few pixels when hovered, depending on how close is the cursor to the edge, it causes the anchor to flicker.
Is it possible to order the shadow to be included in the element's total size? And I know it's kind of bothersome that a button misbehaves in this way, but is it terrible coding? I realize it's kind of a design question, but I'm after the code, really.
TLDR: my anchor flickers when hovered too close to the edge. alternatives?
The code is working, but I'll paste it anyway.
Here's the code:
.btn {
display: inline-block;
width: 50%;
margin-left: 25%;
/*center*/
padding: 10px 20px;
border-radius: 20px;
background-color: #71e2ff;
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff;
}
.btn:hover {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff, 0 5px #34d6ff, 0 6px #34d6ff;
transform: translateY(-2px);
}
.btn:active {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff;
transform: translateY(0);
}
<a class="btn" href="#">suscribe</a>
EDIT:
Thanks Paulie_D, worked like a charm! Pseudo element with absolute position stretched in all directions was the way to go.
No you can't include a box-shadow in the height/width calculations but you can increase the click / hover area by using a pseudo-element which is sized to include the box-shadow.
From CSS-Tricks
button {
border: 0;
border-radius: 0;
outline: 0;
background: #4e68c7;
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
color: white;
white-space: nowrap;
padding: 9px 16px;
position: relative;
}
button:hover,
button:focus {
background: #3d57b4;
}
button:hover,
button:active {
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
-moz-transform: translate(3px, 3px);
-ms-transform: translate(3px, 3px);
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px);
}
button:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -5px;
bottom: -5px;
outline: 1px solid red;
/* for demo */
}
button:hover::after,
button:active:after {
top: -3px;
left: -3px;
right: -2px;
bottom: -2px;
}
body {
padding: 30px;
}
#message {
padding: 10px 0;
}
<button>A Button</button>
Any idea why my search box comes out all buggy looking like this:
Instead of like this:
Here is my HTML code:
<form class="searchform">
<input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
<input class="searchbutton" type="button" value="Go" />
</form>
CSS
#header {
background-color: #F1F1F1;
height: 50px;
border-bottom:1px solid #E1E1E1;
margin: 0px auto;
}
#header_content {
width: 980px;
margin: 0px auto;
padding-top: 8px;
}
#header_logo {
padding-right: 20px;
float:left;
}
.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform, .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
Full demo at: http://jsfiddle.net/FBVL2/
.searchform is not wide enough.
.searchform {
width: 250px;
}
http://jsfiddle.net/FBVL2/3/
Reason has something to do with CSS box model.
You're setting the container to be the same size as the search field. This means there's no space for anything else. You need to have a the input be box padding + input margin + button margin + button width.
Set the #searchform to 250px wide, and the input to 200px wide.
demo
The search form input takes up the whole box, this came out what I'd call perfect.
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
width: 75%;
}
The problem is just this:
.searchform, .searchfield
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
Just remove .searchform
.searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
For me with this changes is working well.
So I made a form and added styling with CSS, it looks fine on windows but when I go to the form with my Mac it looks diffrent, everything is smaller and has changed color.
Why is OS X changing my CSS?
And is there a way to fix this problem?
Image of problem: http://i.tinyuploads.com/zq3rtp.png
This problem happens in every browser on my Mac
HTML Code:
<p>Name:<span class="Req-ourForm">*</span></p> <input type="text" required="required" name="name">
<br /><br />
<p>Email:<span class="Req-ourForm">*</span></p> <input type="text" required="required" name="email">
<br /><br />
<p>Website:<span class="Req-ourForm">*</span></p> <input type="text" required="required" name="website">
<br /><br />
<p>Priority:<span class="Req-ourForm">*</span></p>
<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
<label />
<select class="pri" name="priority" size="1" required="required">
<option value="Low">Low</option>
<option value="Normal">Normal</option>
<option value="High">High</option>
</select>
<!--[if !IE]> --></div> <!-- <![endif]-->
<br />
CSS Code:
input, textarea {
padding: 9px;
border: solid 1px #C9C9C9;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #e2e2e2 url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input.sub {
padding: 9px;
border: solid 1px #C9C9C9;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 300px;
background: #e2e2e2 url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input.captcha {
padding: 9px;
border: solid 1px #C9C9C9;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 45px;
text-align: center;
background: #e2e2e2 url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
textarea {
margin-top: 4px;
width: 380px;
max-width: 380px;
max-height: 150px;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #b3b3b3;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
#include box-shadow(0 0 5px rgba(81, 203, 238, 1));
border: 1px solid rgba(81, 203, 238, 1);
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #C9C9C9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/*CSS FOR DROP DOWN*/
label {
position: relative;
display: inline-block;
}
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 160px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: #fff;
}
select.pri {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 85px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: #fff;
}
select.aop {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 60px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: #fff;
}
select.stu {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 65px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: #fff;
}
Second issue is that the buttons are for some reason white instead of blue,
IMG: http://i.tinyuploads.com/pW0E24.png
HTML code of buttons:
<button id="continue-link" class="button button rect" type="submit">
<span>
<span class="effect"></span>
<span class="label">
SEND
</span>
</span>
</button>
<button id="continue-link" class="button button rect" type="reset">
<span>
<span class="effect"></span>
<span class="label">
CLEAR ALL
</span>
</span>
</button>
CSS of buttons:
/*BUTTON DESIGN*/
.button {
background-color: transparent;
border: 0 none;
border-collapse: separate;
cursor: pointer;
display: inline-block;
font: 11px/1.5 "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
overflow: visible;
position: relative;
}
.button > span {
background: url("common/src/store/base/patterns/buttons/css/bg/button_colors.png") repeat-x scroll 0 0 / 8px 22px #224272;
border: 1px solid #224272;
border-radius: 11px 11px 11px 11px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
color: white;
display: inline-block;
font: 12px/1 "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif;
letter-spacing: 0;
opacity: 1;
padding: 4px 25px;
position: relative;
text-align: center;
transition: opacity 800ms ease 0s;
white-space: nowrap;
word-spacing: 0;
}
.button:-moz-focusring {
outline: 0px dotted;
}
.ns .button, .button.rect {
background: linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0 transparent;
border: 1px solid #1992D9;
border-radius: 4px 4px 4px 4px; /*BUTTON ROUNDNESS*/
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.ns .button:hover, .ns .button:focus, .button.rect:hover, .button.rect:focus {
background: linear-gradient(#2F90D5, #0351B7) repeat scroll 0 0 transparent;
}
.ns .button:active, .ns .button.active, .button.rect:active, .button.rect.active {
box-shadow: 0 1px 0 #FFFFFF, 0 0 9px rgba(0, 0, 0, 0.5) inset;
}
.ns .button > span, .button.rect > span {
background: none repeat scroll 0 center transparent;
border: 0 none;
border-radius: 4px 4px 4px 4px;
box-shadow: none;
color: #FFFFFF;
font-size: 13px;
line-height: 15px;
padding: 4px 20px; /*BUTTON SIZE*/
}
The reason your button is not blue is because you are not declaring a webkit gradient. I had a look at your stylesheet. Add the correct prefix for various browsers as below -
.ns .button, .button.rect {
background: linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: -moz-linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: -webkit-linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: -o-llinear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
border: 1px solid #1992D9;
border-radius: 4px 4px 4px 4px; /*BUTTON ROUNDNESS*/
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
-webkit-appearance: none;
}
This ensures your gradient will work on all browsers that support it.