On iOS (Safari 5) I have to following for input element (top inner shadow):
I want to remove top shadow, bug -webkit-appearance doesn't save.
Current style is:
input {
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
You'll need to use -webkit-appearance: none; to override the default IOS styles. However, selecting just the input tag in CSS will not override the default IOS styles, because IOS adds it's styles by using an attribute selector input[type=text]. Therefore your CSS will need to use an attribute selector to override the default IOS CSS styles that have been pre-set.
Try this:
input[type=text] {
/* Remove First */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Then Style */
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
}
Helpful Links:
You can learn more about appearance here:
http://css-tricks.com/almanac/properties/a/appearance/
If you'd like to learn more about CSS attribute selectors, you can find a very informative article here:
http://css-tricks.com/attribute-selectors/
background-clip: padding-box;
Seems to remove the shadows as well.
As #davidpauljunior mentioned; be careful setting -webkit-appearance on a general input selector.
webkit will remove all properties
-webkit-appearance: none;
Try using the property box-shadow to remove the shadow on your input element
box-shadow: none !important;
Whilst the accepted answer is a good start, as others have pointed out, it only works for inputs whose type is "text". There are a myriad of other input types which also render as text boxes on iOS, and so we need to expand this rule to take into account these other types.
Here's the CSS I'm using to rid input text fields and textareas of the inner shadow, whilst preserving the default styling for buttons, checkboxes, range sliders, date/time dropdowns and radio buttons, all of which are authored using the humble <input> tag too.
textarea,
input:matches(
[type="email"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="url"]
) {
-webkit-appearance: none;
}
I tried to come up with a solution that a.) works and b.) I am able to understand why it works.
I do know that the shadow for inputs (and the rounded border for input[type="search"]) comes from a background-image.
So obviously setting background-image: none was my first attempt, but this does not seem work.
Setting background-image: url() works, but i am still concerned about having a empty url(). Altough it currently is just a bad feeling.
background-clip: padding-box; seems to do the job as well, but even after reading the "background-clip" docs I don't get why this completly removes the background.
My favorite solution:
background-image: linear-gradient(transparent, transparent);
This is valid css and I do understand how it works.
This works better for me. Plus it means I don't have to apply it to every different type of input (i.e. text, tel, email, etc).
* {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Related
Chrome recently updated its input element styles. I really like the number input type, but their new style gives us rounded buttons that don't fit neatly into square input boxes.
I've put in many attempts to get these inputs to change, but they won't budge. From the input[type='number'] itself to these buttons:
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
border-radius: none !important; background: black; color: red;
}
input:-webkit-autofill { background: black; color: red; }
It seems they may not be able to change at all. Does anyone have experience with this? I know there's a way to hide the buttons. Ideally I just want to remove their border-radius.
Interestingly, padding seems to work on these buttons. I know they're listening!
There are ways to accomplish that. Here's a pure CSS solution:
http://jsfiddle.net/Volker_E/WwfW9/
As you can see, the magic CSS property/value in your case is -webkit-appearance: none;.
Through that the Spin Buttons lose their default appearance. And you're able to style in (nearly) every way you want to.
/* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button,
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1em;
border-left: 1px solid #bbb;
opacity: .5; /* shows Spin Buttons per default (Chrome >= 39) */
}
I've added a Data URI image as background (therefor the small size), but you can add whatever image/CSS property you think is fitting your needs.
Only problem remaining is, that you're losing a bit on usability side, as you're not able to style the up and down button separately, and you don't have :hover and :focus styles on a single button.
That's simply not possible with current implementation in Chrome.
Have fun!
Edit 2015-01-18: Improved answer reflecting changes in Chrome >= v39. Thanks to #dtracers
I'm trying to style tag in html using css. It works in Firefox properly but not in chrome. Here is the code i use in styling forms. After referring some through internet I used !important; command along with this style sheet. But it did not worked.
.style {
display: block;
border: none;
color: #333;
background: transparent;
border-bottom: 1px dotted gray;
padding: 5px 2px 0 2px;
width:300px;
font-size: 14;
color:#FFF;
}
.style:focus{
outline: none;
border-color: #51CBEE;
}
simply? you can't.
Firefox allows you to do some styling on a <select>, but is not consistence along browsers.
You should go for a JavaScript masking solution if you really want the <select> to be styled crossbrowser.
Maybe Chosen or Selectize can help you.
Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!
If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.
Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?
add this to your CSS class. Maybe this helps?
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
Since select boxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.
For example, the minimal amount of formatting I can do on a mac is this:
select { height:40px; background:transparent; }
And it looks like this:
#Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.
The only remaining problem is the arrows/caret which are also gone, as mentioned by #romainnm.
Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.
Add some stylying:
.Caret {
display: block;
position: absolute;
cursor: pointer;
right: 1rem;
top: 50%;
margin-top: -1px;
width: 0;
height: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
And this should result in a custom styled select box with arrows:
Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.
Interesting test here
http://cssdeck.com/labs/styling-select-box-with-css3
The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.
You can use border to add padding to your select element and outline for adding the border itself
.select {
border: 12px solid #FFF;
outline: 1px solid #000;
}
taking that you have a white background, this will work as 12px padding but it also adds padding to the arrow
select {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 97%;
}
I'm trying to modify the default selection styles by using the ::selection and ::-moz-selection pseudoelements. I've successfully changed the selection color and background with these two rules:
::-moz-selection{ background: #444; color:#fff; text-shadow: none; }
::selection { background:#444; color:#fff; text-shadow: none; }
However, I also need to change the border-color to white on selection for links. I'm trying to accomplish this with this CSS:
a::-moz-selection { border-color:#FFF;}
a::selection {border-color:#FFF; }
Even when I add an !important override, Safari won't style the border color.
What am I missing? Why can't I change a link's border-color on selection?
You can't define border styles for text selections.
Try defining an outline instead (it was going to be one of the allowed properties as stated in the old spec and the SitePoint Reference):
a::-moz-selection { outline: 1px solid #fff; }
a::selection { outline: 1px solid #fff; }
If that doesn't work, then I'm afraid the browser just doesn't support outlines on ::selection.
Remember that ::selection has been move out of the Selectors spec, with the rest of CSS level 3 still being a draft, so you can't rely on browsers implementing it correctly/completely just yet.
I can't figure this one out. I'm trying to get rid of that blue glow when textarea is highlighted in Firefox.
Here's my CSS:
textarea
{
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
}
:focus {
outline:0;
outline:none;
}
It removes it in Safari, but I'm have no luck with Firefox.
Thanks!
Matt
how about
*:focus {outline:0px none transparent;}
You can remove it with -moz-appearance:none;, though that may affect the whole appearance more than you're wanting.
If you use this on the textarea style:
outline:none;
... it should work with all browsers, not just Firefox
I'm fairly sure that's a Mac OS X theme-specific behaviour.
Just add or define a border... for instance, if a border is defined and I've added outline: none; to my CSS, this does the trick.
I just had an issue with this on a text input- Firefox was using the border property to create the blue glow on :focus - not outline.
input:focus, textarea:focus {
outline: none; // for other browsers
border: none; // only necessary if you haven't set a border on the element
}
You cannot remove the glow in Firefox I think.. Only way to do that would be by adding a custom border to your element, like border: 1px black;, that would make the input box have no glow at all.
Only popular browsers which allows the outline tag are Safari and Chrome (not sure about linux browsers).
on #3
#Solution0:focus{
border:solid #CCC 1px;
outline:1px none transparent;
}
The better way to fix this, in my opinion, is define a custom border and :focus behavior.
textarea {
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
border: none;
}
textarea:focus {
outline: none;
border: none;
}
Slightly unrelated but possibly helpful answer: In my case the blue glow was causing an alignment problem in Firefox only since it adds an extra pixel or two and changes the overall element size. My guess is a lot of people will arrive at this question for similar reasons and rather than remove the blue glow altogether, the solution I came to was to style the input element padding in specifically for Firefox:
#-moz-document url-prefix() {
input:focus {
padding: 5px!important;
}
}
You can change this to suite your needs but it may be helpful for some of you to know about the #-moz-document url-prefix() rule.