I found some code for generating CSS3 buttons which I'm using on my site. The buttons look great when viewed in the browser. However, on the mobile web version of my site (which uses the same styles) the buttons render differently. Even stranger, if I use Safari and view my site with User Agent of iPhone the buttons look as they should. However in iOS Simulator they don't. Can someone help me understand why?
Here's the code I'm using:
.button, #button .button, li.button .button {
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: baseline;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 1.5em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.orange, #button .orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
Here is how it renders in the browser:
And here is how it renders on an iPhone:
Apply "-webkit-appearance:none;" on your css properties and add this line
"input[type=submit], input[type=Reset]{ -webkit-appearance:none; }".
As Shakti says you should just put the following css for the button.
-webkit-appearance: none;
This is explained further in this question:
'CSS submit button weird rendering on iPad/iPhone'
It seems that on iOS the buttons have the default iOS rounded look if you supply just a simple background color :
background: orange
But if you supply a gradient then this is effectively overriding the appearance css property to use a custom style.
But because you had the wrong syntax it was giving you the iOS look.
I caught my mistake. I had the wrong syntax for -webkit-gradient. Instead of:
-webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20));
It's...
-webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
I had a comma between left and top where it shouldn't have been.
Have you tried using an SVG as your background image (generator can be found here)? Using this worked on an iPhone 3G I have lying around (jsFiddle link here):
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZBQTUxQSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0Y0N0EyMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkwNCkiIC8+Cjwvc3ZnPg==);
This is compatible with IE9, Chrome, Safari and Opera. This will not work with IE7/8. What I suggest is using an IE specific stylesheet or adding to the .orange class instructions to apply the style to IE7 or IE8 and below. More info on that here.
Related
At first let me aknowledge you to this issue. I had an anchor with these properties:
.upvote_box a {
width: 20px;
height: 21px;
display:block;
background-color: #828282;
background-image: url(../imgs/upvote.svg);
background-size: 20px 21px;
}
The background-color there has a meaning, because it transits into a different color through CSS3 transitions. So my SVG is a white box with a cut hand icon in it. The rendering on Chrome on desktop was fine. But then I checked Safari and I saw these tiny lines around this anchor. So then I made an SVG icon with 1px border in it. So the dimensions of the SVG after that were width: 22px; height:23px;Of course I changed all the setting in the CSS, too. But I also added one thing to prevent this from happening – box-shadow: inset 0px 0px 0px 1px #fff – this solved the problem in Safari on desktop. But the problem sustains on mobile Chrome and mobile Safari.
This is what it looks like:
Also there is link to JSFiddle: Fiddle
Thank you!
add this :
-webkit-appearance: none;
or this :
-webkit-box-shadow: inset 0px 0px 0px 1px #fff
I need button which has more bling than a standard browser rendering, and because I am not a designer, I thought I'd use an existing solution. So, I went to a button maker I found on the Internet, and it made me a button which looks good. I copied the CSS, and my own button looks differently in my browser. On Inspect Element, the CSS is the same.
Their button looks like this:
And it has following rules applied:
My button looks uglier, because it gets a large border on all sides:
But when I look at the CSS, there is no difference to the applied rules. And while my element is an input, I also have "real" buttons on my page, and they show the same behavior.
I tried running my page with or without a resetting CSS, but this made no difference. I always get the ugly look.
When I run their code in a fiddle, I get the same ugly result.
This happens in two different tabs of the same browser on the same machine, a Firefox 29.
Here again the problematic code:
button {
border-top: 1px solid #bfd1ed;
background: #5987d1;
background: -webkit-gradient(linear, left top, left bottom, from(#2662c3), to(#5987d1));
background: -webkit-linear-gradient(top, #2662c3, #5987d1);
background: -moz-linear-gradient(top, #2662c3, #5987d1);
background: -ms-linear-gradient(top, #2662c3, #5987d1);
background: -o-linear-gradient(top, #2662c3, #5987d1);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
button:hover {
border-top-color: #2662c3;
background: #2662c3;
color: #bdbdbd;
}
button:active {
border-top-color: #2662c3;
background: #2662c3;
}
body {
background-color: #555555;
}
The difference is you're using a button element.
Us a span element and you'll get the same result.
Demonstration
You might also take the opposite approach and try to reset the button's style but in my opinion it's easier to style a span than to remove those styles.
Just put border: none; on your button:
http://jsfiddle.net/wn7vh/
Hope that helps.
Thats because you use the wrong HTML tag
the css in your example is for an element with the class "button"
and if you look at the example in the button builder, you will see that they don't use:
<button name="My button"> A button! </button>
but they use a link tag and style it like a button:
<a class="button" name="My button" href="#">A button!</a>
so if you use the second version for the button, it will look like the example in the button builder
I want very simple markup (<a class="next">Next</a>) to show a button with rounded corners, but with an arrow pointing right (like the "back" navigation button at the top of some iPhone apps). This is what I have so far (jsfiddle link here):
a.next {
padding: 6px 12px;
border-width: 1px !important;
border-color: #333 !important;
background: #5BFF2D; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5BFF2D', endColorstr='#20CA00'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#5BFF2D), to(#20CA00)); /* for webkit browsers */
background: -moz-linear-gradient(top, #5BFF2D, #20CA00); /* for firefox 3.6+ */
border-radius: 6px 0 0 6px !important;
border-style: solid none solid solid !important;
}
a.next:after {
content: '';
display: block;
width: 0px;
height: 0px;
border-top: 12px solid transparent;
border-left: 16px solid green;
border-bottom: 12px solid transparent;
background: white;
}
..which looks like this:
As you can see, it doesn't work at all. My thoughts at this point are: even if I do get the arrow correctly positioned, it'll never show the background gradient, much less the 1px border, correctly.
Is there a clean way of doing this?
Original Answer
This gets very close, but without a border. If you want to add a span inside, then the border becomes possible also, as well as some smoothing on the 'faked' gradient.
Updated Answer
This achieves the gradient and overall looks better. The main issue is that it requires you to have a solid background color behind it (white, in this case).
Final Answer
This actually does support the gradient leaving the angles transparent. It only will work in browsers supporting CSS3 transforms. I tested in IE9, FF 11, Chrome 18. IE9 is not showing your filter gradient. Chrome renders on my screen with a snubbed point to the arrow (perhaps with some browser targeting, variations like that could be adjusted for).
I am using an input type='submit' with CSS rules applied that make the background a gradated dark blue and the font color white. I cannot get this input to render consistently in IE 8. In some parts of my site, it looks just fine, with its lovely white type. In other parts, the color assigned to the body trumps the white applied by the CSS rules.
I've done a fair bit of research on this and can't find a solution that works. The one I did find on CSS Tricks recommended adding the css using jQuery. I tried this. I successfully added an inline style, but IE8 still trumped my white. I've switched in and out of Compatibility View, still no dice. 0
Why?
Here is the pertinent markup and CSS.
CSS
body {
color:#222;
font-size: 12px;
width:100%;
background:#8A7967 url(images/bg_body.png) top left repeat-x;
}
.buttonBigBlue,
input[type="submit"] {
color:#FFF!important;
-webkit-border-radius:12px;
-moz-border-radius: 12px;
border-radius:12px;
padding:3px 9px;
text-transform:uppercase;
font-weight:bold;
text-align:center;
vertical-align:middle;
border:1px solid #74a1a9;
cursor:pointer;
background: #678382; /* for non-css3 browsers */
background:-webkit-gradient(linear, left top, left bottom, from(#77A7B1), to(#678382));
background:-moz-linear-gradient(top, #77A7B1, #678382);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#77A7B1', EndColorStr='#678382'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#77A7B1', EndColorStr='#678382')"; /* IE8 */
}
MARKUP
<input type="submit" class="buttonBigBlue" id="login" value="Login" name="login">
This button displays with #222 text in IE8.
<input type="submit" class="buttonBigBlue" id="saveChanges" value="Save Changes" name="saveChanges">
This button displays with #FFF text in IE8
UPDATE after further investigation.
The containing div for the inputs that won't display properly is called #loginBox. It's styles are these:
#loginBox {
width:300px;
margin:25px auto;
padding: 25px 30px 30px;
border:1px solid #c9b9a8;
-webkit-border-radius:9px;
-moz-border-radius: 9px;
border-radius:9px 9px 9px 9px;
-webkit-box-shadow:rgba(0,0,0,.3) 4px 4px 6px;
-moz-box-shadow: 4px 4px 6px rgba(0,0,0,.3);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#544845')";
/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#544845');
min-height:160px;
background-color:#fff;
box-shadow: 4px 4px 6px rgba(0,0,0,.3);
}
When I remove the -ms-filter and filter rules that set the box shadow, the input text returns to white.
Both display the same way in my IE8
example: http://www.jsfiddle.net/gaby/9grJP/
Maybe you have other rules overriding these ones.
Revise your CSS, you likely have some CSS rule that overrides this. Your sippet works perfectly standalone.
I am wondering if its possible to remove the default blue and yellow glow when I click on a text input / text area using CSS?
Edit (11 years later): Don't do this unless you're going to provide a fallback to indicate which element is active. Otherwise, this harms accessibility as it essentially removes the indication showing which element in a document has focus. Imagine being a keyboard user and not really knowing what element you can interact with. Let accessibility trump aesthetics here.
textarea, select, input, button { outline: none; }
Although, it's been argued that keeping the glow/outline is actually beneficial for accessibility as it can help users see which Element is currently focused.
You can also use the pseudo-element ':focus' to only target the inputs when the user has them selected.
Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/
This effect can occur on non-input elements, too. I've found the following works as a more general solution
:focus {
outline-color: transparent;
outline-style: none;
}
Update: You may not have to use the :focus selector. If you have an element, say <div id="mydiv">stuff</div>, and you were getting the outer glow on this div element, just apply like normal:
#mydiv {
outline-color: transparent;
outline-style: none;
}
On textarea resizing in webkit based browsers:
Setting max-height and max-width on the textarea will not remove the visual resize handle. Try:
resize: none;
(and yes I agree with "try to avoid doing anything which breaks the user's expectation", but sometimes it does make sense, i.e. in the context of a web application)
To customize the look and feel of webkit form elements from scratch:
-webkit-appearance: none;
I experienced this on a div that had a click event and after 20 some searches I found this snippet that saved my day.
-webkit-tap-highlight-color: rgba(0,0,0,0);
This disables the default button highlighting in webkit mobile browsers
Carl W:
This effect can occur on non-input elements, too. I've found the following works as a more general solution
:focus {
outline-color: transparent;
outline-style: none;
}
I’ll explain this:
:focus means it styles the elements that are in focus. So we are styling the elements in focus.
outline-color: transparent; means that the blue glow is transparent.
outline-style: none; does the same thing.
This is the solution for people that do care about accessibility.
Please, don't use outline:none; for disabling the focus outline. You are killing accessibility of the web if you do this. There is a accessible way of doing this.
Check out this article that I've written to explain how to remove the border in an accessible way.
The idea in short is to only show the outline border when we detect a keyboard user. Once a user starts using his mouse we disable the outline. As a result you get the best of the two.
If you want to remove the glow from buttons in Bootstrap (which is not necessarily bad UX in my opinion), you'll need the following code:
.btn:focus, .btn:active:focus, .btn.active:focus{
outline-color: transparent;
outline-style: none;
}
This solution worked for me.
input:focus {
outline: none !important;
box-shadow: none !important;
}
some times it's happens buttons also then use below to remove the outerline
input:hover
input:active,
input:focus,
textarea:active,
textarea:hover,
textarea:focus,
button:focus,
button:active,
button:hover
{
outline:0px !important;
}
<select class="custom-select">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<style>
.custom-select {
display: inline-block;
border: 2px solid #bbb;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #f8f8f8;
-webkit-appearance:none; /* remove the strong OSX influence from Webkit */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* for Webkit's CSS-only solution */
#media screen and (-webkit-min-device-pixel-ratio:0) {
.custom-select {
padding-right:30px;
}
}
/* Since we removed the default focus styles, we have to add our own */
.custom-select:focus {
-webkit-box-shadow: 0 0 3px 1px #c00;
-moz-box-shadow: 0 0 3px 1px #c00;
box-shadow: 0 0 3px 1px #c00;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #bbb;
color: white;
pointer-events:none;
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
}
</style>
I found it helpful to remove the outline on a "sliding door" type of input button, because the outline doesn't cover the right "cap" of the sliding door image making the focus state look a little wonky.
input.slidingdoorbutton:focus { outline: none;}
I just needed to remove this effect from my text input fields, and I couldn't get the other techniques to work quite right, but this is what works for me;
input[type="text"], input[type="text"]:focus{
outline: 0;
border:none;
box-shadow:none;
}
Tested in Firefox and in Chrome.
Sure! You can remove blue border also from all HTML elements using *
*{
outline-color: transparent;
outline-style: none;
}
And
*{
outline: none;
}