Currently I am implementing a mobile version of a website.
On iOS 7.1 safari or UIWebView, it show
However my expected output is (also correct on android browser)
you could see that the upper part of the textbox has a inner shadow on iOS.
What I did is set the box-shadow to none. However, the shadow is still exist.
Anyone has ideas on this issue?
here is the CSS code
input, textarea {
box-shadow: none;
background-color: transparent;
border: 1px solid #EEE;
}
To remove the inner shadow from the input field add -webkit-appearance: none; and it will remove the inner shadow from the input field. This DEMO has been tested on safari iOS7 .
input[type="text"], textarea {
display:block;
-webkit-appearance: none; /*this property remove the inner shadow*/
border-radius:1px;
background-color: white;
height:24px;
}
Update
Although using -webkit-appearance: none; and -webkit-appearance: caret; have own problem, so another method is to use a transparent background image. or use gradient. Another Example using Gradient. DEMO is here.
input[type="text"], textarea
{
background-color: white;
height:24px;
-webkit-tap-highlight-color: rgba(0,0,0,0);/*remove the grey highlight appears once touching an element.*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
/*Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
}
try this
input, textarea {
box-shadow: none !important;
background-color: transparent;
border: 1px solid #EEE;
}
Related
I have a problem with default option in JQuery combobox.
I need to create small widget in jquery(or something else?) with changing text in dov/span.
I want to:
person who come in our website at start see a first of list option, and he can change this text with option in combobox.
<option value="red" selected>Red</option>
dosent work..
please help..
codepen
try this
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
$(":input#colorselector").trigger('change');
//or
//$('#red').show();
//or
// $("#colorselector").trigger("change");
});
// [forked from](http://jsfiddle.net/FvMYz/)
// [show-hide-based-on-select-option-jquery)(http://stackoverflow.com/questions/2975521/show-hide-div-based-on-select-option-jquery/2975565#2975565)
/* https://gist.github.com/toddparker/32fc9647ecc56ef2b38a */
/* Some basic page styles */
body {
font: 100%/1.5 AvenirNext-Regular, Corbel, "Lucida Grande", "Trebuchet Ms", sans-serif;
color: #111;
background-color: #fff;
margin: 2em 10%
}
/* Label styles: style as needed */
label {
display:block;
margin: 2em 1em .25em .75em;
font-size: 1.25em;
color:#333;
}
/* Container used for styling the custom select, the buttom class adds the bg gradient, corners, etc. */
.dropdown {
position: relative;
display:block;
margin-top:0.5em;
padding:0;
}
/* This is the native select, we're making everything the text invisible so we can see the button styles in the wrapper */
.dropdown select {
width:100%;
margin:0;
background:none;
border: 1px solid transparent;
outline: none;
/* Prefixed box-sizing rules necessary for older browsers */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Remove select styling */
appearance: none;
-webkit-appearance: none;
/* Magic font size number to prevent iOS text zoom */
font-size:1.25em;
/* General select styles: change as needed */
/* font-weight: bold; */
color: #444;
padding: .6em 1.9em .5em .8em;
line-height:1.3;
}
.dropdown select,
label {
font-family: AvenirNextCondensed-DemiBold, Corbel, "Lucida Grande","Trebuchet Ms", sans-serif;
}
/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
.dropdown::after {
content: "";
position: absolute;
width: 9px;
height: 8px;
top: 50%;
right: 1em;
margin-top:-4px;
z-index: 2;
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpolygon fill='rgb(102,102,102)' points='8,12 0,0 16,0'/%3E%3C/svg%3E") 0 0 no-repeat;
/* These hacks make the select behind the arrow clickable in some browsers */
pointer-events:none;
}
/* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.dropdown select::-ms-expand {
display: none;
}
/* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
select:focus::-ms-value {
background: transparent;
color: #222;
}
}
/* Firefox >= 2 -- Older versions of FF (v2 - 6) won't let us hide the native select arrow, so we'll just hide the custom icon and go with native styling */
/* Show only the native arrow */
body:last-child .dropdown::after, x:-moz-any-link {
display: none;
}
/* reduce padding */
body:last-child .dropdown select, x:-moz-any-link {
padding-right: .8em;
}
/* Firefox 7+ -- Will let us hide the arrow, but inconsistently (see FF 30 comment below). We've found the simplest way to hide the native styling in FF is to make the select bigger than its container. */
/* The specific FF selector used below successfully overrides the previous rule that turns off the custom icon; other FF hacky selectors we tried, like `*>.dropdown::after`, did not undo the previous rule */
/* Set overflow:hidden on the wrapper to clip the native select's arrow, this clips hte outline too so focus styles are less than ideal in FF */
_::-moz-progress-bar, body:last-child .dropdown {
overflow: hidden;
}
/* Show only the custom icon */
_::-moz-progress-bar, body:last-child .dropdown:after {
display: block;
}
_::-moz-progress-bar, body:last-child .dropdown select {
/* increase padding to make room for menu icon */
padding-right: 1.9em;
/* `window` appearance with these text-indent and text-overflow values will hide the arrow FF up to v30 */
-moz-appearance: window;
text-indent: 0.01px;
text-overflow: "";
/* for FF 30+ on Windows 8, we need to make the select a bit longer to hide the native arrow */
width: 110%;
}
/* At first we tried the following rule to hide the native select arrow in Firefox 30+ in Windows 8, but we'd rather simplify the CSS and widen the select for all versions of FF since this is a recurring issue in that browser */
/* #supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {
.dropdown select { width:110%; }
} */
/* Firefox 7+ focus style - This works around the issue that -moz-appearance: window kills the normal select focus. Using semi-opaque because outline doesn't handle rounded corners */
_::-moz-progress-bar, body:last-child .dropdown select:focus {
outline: 2px solid rgba(180,222,250, .7);
}
/* Opera - Pre-Blink nix the custom arrow, go with a native select button */
x:-o-prefocus, .dropdown::after {
display:none;
}
/* Hover style */
.dropdown:hover {
border:1px solid #888;
}
/* Focus style */
select:focus {
outline:none;
box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
background-color:transparent;
color: #222;
border:1px solid #aaa;
}
/* Firefox focus has odd artifacts around the text, this kills that */
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
option {
font-weight:normal;
}
/* These are just demo button-y styles, style as you like */
.button {
border: 1px solid #bbb;
border-radius: .3em;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}
.output {
margin: 0 auto;
padding: 1em;
}
.colors {
padding: 2em;
color: #fff;
display: none;
}
.red {
background: #c04;
}
.yellow {
color: #000;
background: #f5e000;
}
.blue {
background: #079;
}
footer {
margin: 5em auto 3em;
padding: 2em 2.5%;
text-align: center;
}
a {
color: #c04;
text-decoration: none;
}
a:hover {
color: #903;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<label class="wrapper" for="states">This label is stacked above the select</label>
<div class="button dropdown">
<select id="colorselector">
<option value="red" selected>Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="output">
<div id="red" class="colors red"> “Good artists copy, great artists steal” Pablo Picasso</div>
<div id="yellow" class="colors yellow"> “Art is the lie that enables us to realize the truth” Pablo Picasso</div>
<div id="blue" class="colors blue"> “If I don't have red, I use blue” Pablo Picasso</div>
</div>
<footer>
<small>
Javascript
by stackoverflow-user113716
· CSS
by Todd Parker</small>
</footer>
I met a project that set the gradient filter to whole web page.
So I have implemented the filter like this.jsfiddle
HTML
<div class="container">
<button class="tag">Featured</button>
<div id="grad1">
</div>
CSS
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax (must be last) */
opacity: 0.5;
}
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position: relative;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 0px;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
But the problem is button is not selectable in this case.
I have no sense how to make the button work.
How can I make button selectable and also show gradient above the button?
Finally UI should look like this.
its seems you are looking for pointer-events: none;
Demo http://jsfiddle.net/r6tdc3Lh/5/
a </div> tag is missing.
At the end of ur code.
Ur container isnt closing, so your button cant‘t be clicked.
Try to add just another closing tag.
Check the fiddle. You have two issue 1. set button attribute type="button" and 2. .tag z-index should be 1. Because your button is absolute position.
UPDATE
I Update the fiddle. I think it will help you.
I made a CSS class that applies a gradient and rounded corners to a span element to act as a button. It seems to work in most browsers that I've tested, but IE9 is giving me some issues. As the class is now the rounded corners aren't working correctly. However if you look very close it seems like there are rounded corners underneath a layer that is not rounded (I think that's the best way to explain how it looks, forgive me if that doesn't make sense)
Anyway, by trial and error I messed with the class until I found that removing the 'display:inline-block;' property allows for the rounded corners to be displayed correctly, but as a result the gradient no longer works. Any ideas?
http://jsfiddle.net/jessikwa/wcgzkkgr/
The HTML:
<span class="action_button">Button</span>
The CSS:
.action_button
{
color: #FFFFFF;
font-size: 12px;
font-family: arial;
cursor: pointer;
text-decoration: none;
padding: 3px 5px;
display: inline-block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid #f7a03b;
webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #8b8b8b 0px 1px 4px;
-moz-box-shadow: #8b8b8b 0px 1px 4px;
box-shadow: #8b8b8b 0px 1px 4px;
background-color: #efbb7f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#efbb7f), to(#f88600));
background-image: -webkit-linear-gradient(top, #efbb7f, #f88600);
background-image: -moz-linear-gradient(top, #efbb7f, #f88600);
background-image: -ms-linear-gradient(top, #efbb7f, #f88600);
background-image: -o-linear-gradient(top, #efbb7f, #f88600);
background-image: linear-gradient(to bottom, #efbb7f, #f88600);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#efbb7f, endColorstr=#f88600);
}
Update: Further reading of other posts in StackOverflow gets me a bit closer, but still not quite right.
IE9 border-radius and background gradient bleeding
This post's answer suggestions using an image, which I would prefer to avoid. Another proposed answer of the thread puts a wrapper around the button with "overflow:hidden;", but this doesn't seem to be quite right, either.
http://jsfiddle.net/uu19uqg4/
you have forgot the "-" near webkit-border-radius
try this :
-webkit-border-radius: 3px;
this link can be usefull
Add the following in the head of the page.
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=8,IE=9" />
This will disable the compatibility mode in IE9. If it's due to compatibility issue then it will be solved.
I want to style a select and it works almost perfectly but on google chrome behvior is different and I fixed that with -webkit-appearance: none; but this delete also select arrow.
I try to set an arrow for my select but it is not visible in chrome because I use multiple backgrounds. What can I do to set that arrow on chrome.
select{
width:120px;
margin:10px;
background:url(http://s14.postimage.org/jls6v1ywt/select_background.png),
url(http://s13.postimage.org/edsg65ss3/select_arrow.jpg);
background-position: center center,100% 53%;
background-repeat: repeat-x, no-repeat;
border:1px solid #DDDBD7;
-webkit-appearance: none;
}
check my example:
http://jsfiddle.net/DCjYA/359/
Swap the order of the backgrounds, so that the "arrow" background is on top.
http://dev.w3.org/csswg/css3-background/#layering
The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on. The background color, if present, is painted below all of the other layers.
See: http://jsfiddle.net/thirtydot/DCjYA/361/
background: url(http://s13.postimage.org/edsg65ss3/select_arrow.jpg), url(http://s14.postimage.org/jls6v1ywt/select_background.png);
background-position: 100% 53%, center center;
background-repeat: no-repeat, repeat-x;
select {
padding:9px;
margin: 0;
border-radius:4px;
-webkit-box-shadow:
0 0px 0 #ccc,
0 0px #fff inset;
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
color:black;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
cursor:pointer;
border: 1px solid #ccc;
}
This piece of code will fix your problem. Just change the padding and use local images or color codes a/c to your need. or use this to generate the code for you.
See: JS fiddle for background gradient and down arrow
I am trying to achieve a gradient + text shadow effect in Chrome/Safari using CSS text-shadow and a combination of text-shadow and background-image: -webkit-gradient, see example blw. I can only make one of the effects apply(if I add the shadow the gradient disappears. What am I doing wrong?
h1 {
font-size: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 1px #fff;
}
The gradient "disappears" because the text-shadow is on a level above the background.
The text (which is transparent)
The shadow
The background.
We can work around this by copying the text and put it below the original layer, then apply the shadow there, for example:
h1 {
position: relative;
font-size: 100px;
text-align: center;
}
h1 div {
background-image: linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
width: 100%;
}
h1:after {
text-shadow: 10px 10px 11px #fff;
color: transparent;
}
#hello:after {
content: 'Hello World';
}
<h1 id="hello"><div>Hello World</div></h1>
With no extra HTML markup or pseudo elements you can achieve this effect using the filter property and drop-shadow function. This method also works with a background image vs gradient.
h1 {
font:54px 'Open Sans', 'Helvetica', Arial, sans-serif;
background-image: linear-gradient(#787878, #484848);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-filter: drop-shadow(2px 2px #333);
filter: drop-shadow(2px 2px #333);
}
Fiddle: https://jsfiddle.net/eywda89g/
This answer is similar to the answer by #KennyTM above, except his answer has the shadow hard-coded into the CSS, which is not suitable for dynamic text such as in a CMS. Also, his method requires a separate ID for each instance, which would be very tedious if you plan to use this effect a lot. The example below uses a class instead, and allows dynamic text.
Try this:
h1 {
position: relative;
font-size: 100px;
text-align: center;
}
h1 div {
background-image: linear-gradient(teal, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
width: 100%;
}
h1:after {
text-shadow: 2px 2px 2px #000000;
color: transparent;
}
.gradient-shadow:after {
content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */
}
And then in your HTML:
<h1 class="gradient-shadow" title="Hello World"><div>Hello World</div></h1>
Just make sure that the text in the <div> matches the text in the title attribute.
Here is a Codepen example of this method:
https://codepen.io/mprewitt/pen/gexypd
These answers helped me a lot in getting to my final result. Thank you.
So I figured I would share it. Seeing the colour of my text is light, I needed a darker "border" at the top to make it pop.
Also while 'ems' are harder to work with (as opposed to px), I found that the transition of colours for the text-shadow looks a lot smoother as I wanted to make it a gradient as well :)
Works on Edge, Chrome, Vivaldi and FireFox, a little blurry though.
<h1 class="text3d">Privacy Policy</h1>
.text-3d{
background-image:linear-gradient(to bottom,#f7eb3b 30%,#f5d839 40%,#eead34 50%, #eb9531 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter:
drop-shadow(-0.015em -0.015em 0 #ffff00)
drop-shadow(-0.015em -0.015em 0 #bf290c)
drop-shadow(0 -0.005em 0 #bf290c)
drop-shadow(0.010em 0.025em 0 #bf290c)
drop-shadow(0.015em 0.030em 0 #b6240b)
drop-shadow(0.020em 0.035em 0 #a91d0b)
drop-shadow(0.025em 0.040em 0 #8d0d09)
drop-shadow(0.030em 0.045em 0 #830708)
drop-shadow(0.035em 0.050em 0 #680a07)
drop-shadow(0.01em 0.08em 0.01em rgba(0,0,0,0.10))
}