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
Related
I've set up my own custom scrollbar with CSS, and I'd like to know know how to only apply these settings to my vertical crossbar.
I've looked up other posts to fix this, but haven't been successful in implementing their solutions in my project.
Any fix that either removes my horizontal scrollbar completely or resets its settings to default would be greatly appreciated.
Here's my code:
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: rgb(26, 23, 23);
}
::-webkit-scrollbar-thumb {
background-color: hsl(270, 2.9%, 48.7%);
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: hsl(270, 2.9%, 78.7%);
}
edit: The problem seems to have been related to other pre-built styles overriding overflow-x. overflow-x: hidden !important; solved the issue.
The questioner have faced a problem that a WebKit engine won't allow him to remove customized horizontal scrollbar.
It seems that the implementation of such a removal vary from one browser to another and there's no universal way to hide scrollbars.
Using overflow: hidden will disable the scroll and that’s not what we want.
So we’ll need another way to hide the scrollbar.
Unfortunately, there is no universal CSS property that does something
like this
div {
scrollbar-visibility: hidden; /* <--- I wish we had this one !! */
}
We’ll need to implement different CSS properties for each browser.
For Firefox, we can set the scroll-bar width to none.
scrollbar-width: none; /* Firefox */
For IE, we’ll need to use -ms prefix property to define scrollbar style
-ms-overflow-style: none; /* IE 10+ */
For Chrome and Safari. We’ll have to use CSS scrollbar selector.
Then apply display: none to hide it.
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
Or you can set it’s width and height to 0.
::-webkit-scrollbar {
width: 0;
height: 0;
}
https://redstapler.co/css-hidden-scrollbar-while-scrollable-element/
Nevertheless, the following solution took effect in questioner's situation:
overflow-x: hidden !important;
I am styling some scrollbars on a webpage for webkit, and I want the track to be semi-transparent so that some of the background image bleeds through, but when I insert an RGBa value, it treats it just like an RGB value (without any alpha-channel). Does ::-webkit-scrollbars not accept RGBa? I know it doesn't accept anything like transitions, so did WebKit skip out on other cool effects too?
Code:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 8px;
}
::-webkit-scrollbar-track {
background-color: rgba(57,57,57, .6);
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgba(156, 156, 156, .6);
}
(But - on my side - it is treating rgba as just a plain rgb value)
Checkout my vertical jsfiddle for doing it with a vertical page. I setup a transparent track with a background image with the following:
::-webkit-scrollbar-track {
background: rgba(57,57,57, .6);;
}
For a horizontal page, checkout this horizontal fiddle. The difference with the horizontal code is I setup the page to be 100% height:
body, html, .scrolls {
height: 100%;
}
Then I wrapped the page content in a div, which is where the scrolling will happen, not on the page itself, like so:
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
background-image: url('http://www.evokia.com/images/large-background.jpg');
}
This is the workaround for the fact that it appears that the horizontal scroll on the page never gets the background of the page, so in order to get the transparent track we needed to create the scroll in the page.
I'm pretty sure webkit does support RGBa values, I've used body::-webkit-scrollbar-track{} which has worked fine.
I've also used the Jscroll pane plugin, which I've found to be very intuitive and this does support rgba values too. This can also support full webpage customised scroll bars and IE 7+ as well.
Is it possible to see your code to see if ther are any issues?
I found the css border on the table cell is lost when applying css gradient filter at the same time. It seems that the gradient effect overrides the border.
Is it a browser bug or am I missing something here?
The style is defined like this:
.c7 {
color: #000000;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#c0c0c0',EndColorStr='#f0f0f0');
border: #000000 1px solid;
width: 100px;
height: 30px;
}
[Update] You could apply an opacity filter and reduce it from 100 to 1, and you can see how border emerges gradually. It confirms my guess that the gradient effect shows over the border.
Applying this also works:
position: relative;
z-index: -1;
I've found a fix but you may not like it...
If you render in IE in quirks mode the border renders fine, it is only obscured if you're using compatibility mode. Compare these two pages in IE8:
With a DOCTYPE declaration
(source: boogdesign.com)
Without a DOCTYPE declaration
(source: boogdesign.com)
What also works is clicking the compatibility view button, but my attempts to get the same results with the compatibility mode meta tags were unsuccessful. I tried using box-sizing, but also with no success. I conclude the only way to get it to work as you want is to force IE into quirks mode, but that may create so many other issues for layout that you may be better off just adding a wrapper element to attach your gradient background to.
Use a DIV to contain the content in each cell. Apply the gradient to the DIV and put the border on the cell. The gradient will be restricted to the DIV and will not overwrite the border.
http://jsfiddle.net/WWCaj/1/
After trying lots of fixes I've come to the conclusion that its simply not worth trying to use filter CSS. A quote from #mdo who's behind the Twitter bootstrap css:
Filters are dangerous business in IE, especially 7 & 8. I'd rather not include those because it'd be huge performance losses for folks who overuse them.
Problems I hit applying css to td elements:
The position: relative only works for IE9, not IE8
The z-index: -1 doesn't work on td elements
If you do have a filter then you have to turn it off for hovering
My table looked better having the borders than having the gradient on the table cells
use position: relative !important;
Its work fine...
on the td:
/* enough for IE9 */
background-origin: padding-box;
background-clip: padding-box;
/* for IE8 */
position: relative;
worked for me.
also you may want to experiment with border-collapse as this bug behave differently between
border-collapse: separate
and
border-collapse: collapse
I tried all of these solutions with no success. So, I placed the gradient in the tr and then decided to use the ::before pseudo element and style a border on it. However, I didn't even get as far as adding a border to the pseudo element. The following was enough.
table thead {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0 );
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0 );
}
table th {
background: none;
border-right: 1px solid #a5a694;
background-clip: padding-box;
position: relative!important;
z-index: 100;
}
table th:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
}
But if that doesn't work you could also add a border to the pseudo class as I had originally planned:
table th:before {
border-right: 1px solid #000000;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
z-index: 1000;
}
Pseudo classes are great, I use them all the time and they have very wide browser support, even in IE8.
I found this code from here: http://www.cssportal.com/form-elements/text-box.htm
But the problem is you can still see the rectangular shape of the textbox whenever you click inside it. What would be the fix for this? So that the highlight will go with the image with rounded corners
/* Rounded Corner */
.tb5 {
background: url(images/rounded.gif) no-repeat top left;
height: 22px;
width: 230px;
}
.tb5a {
border: 0;
width:220px;
margin-top:3px;
}
This should only occur in some browsers such as Google Chrome, it is meant to help with usability and accessibility but it can cause issues with some styling. What you want to do is remove the dynamic outlines like this:
input[type="text"] {
outline: none;
}
In addition, you can try highlighting the text box still by including a background image change using a psedo-selector like :focus
input[type="text"]:focus {
background: url(images/rounded-focused.gif) no-repeat top left;
}
I'm trying to style my form buttons and I'm experiencing a problem in Firefox that I can't get to the bottom of...
I want to style certain <a />s and <input type="submit" />s to look the same (I have a button background image, using a sliding-doors technique to apply a hover effect.)
This all works great, except in Firefox, the input submit text is slightly lower down than it should be. IE and Safari/Chrome work fine.
(source: muonlab.com)
Anyone got any ideas?
Thanks
<div class="buttons">
« Back
<input type="submit" class="button btn-large-green" value="Save changes" />
</div>
.button
{
cursor: pointer;
border: 0;
background-color: #fff;
color: #fff;
font-size: 1.4em;
font-weight: bold;
outline: 0;
font-family: Arial, Verdana, Sans-Serif;
}
a.button
{
display: block;
float: left;
text-align: center;
text-decoration: none;
padding: 5px 0 0 0;
height: 22px;
margin-right: 1em;
}
.btn-small-grey
{
height: 27px;
width: 96px;
background-position: 0 -81px;
background-image: url(/assets/images/buttons/buttons-small.gif);
}
.btn-large-green
{
height: 27px;
width: 175px;
background-position: 0px -54px;
background-image: url(/assets/images/buttons/buttons-large.gif);
}
I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
I hope this helps.
I have same problem every time I need to style form buttons. Sorry, quite busy at the moment so only brief description how I usually fix it.
In FF Text is usually a bit lower, exactly like on the image you attached and so then I simply apply "padding-bottom" on the button itself. It moves the text on the button number of pixels up.
The problem is it also moves text in IE and now IE looks a bit off. To fix that I apply "line-height" to the same button with exactly same value as the height of the button. That makes IE to ignore padding completely and positions the text right in the middle. Below is sample HTML code:
<input type="submit" value="SEARCH" class="search"/>
and CSS:
.search
{
background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
height: 29px;
width: 104px;
border: 0;
/* centering text on button */
line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
padding-bottom: 2px; /* IE will ignore but works for FF */
}
Sorry I didn't applied it directly to your code but I'm a bit busy at the moment, hope you got the idea and it helps though.
ps. just checked in IE8 and all above moves text few pixels up. So it means more (endless?) mocking around with padding top/bottom.. I lost my patience now though and I think I'll be putting all this in separate stylesheet from now on that is until I find some fairly easy and universal solution for all this
Inputs are formatted not following the W3 box model convention in different browsers, you might want to include:
input /*Content follows box model*/
{
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height:24px;
}
Also include for firefox (which Shelly pointed out):
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
Otherwise you could use button
I collected all these solutions from various sources, they deserve the credit
I had the same problem and I've solved (only for FF and Safari) by fixing the width but not the height and playing with the values: padding (top and bottom), line-height and if needed setting the vertical-align to middle. However all it's more easy to do if you set all the values (even the font size) in pixel.
EDIT: I think that there isn't a cross-browser solution, because the problem is due to the text rendering of the browsers. To solve completely the problem you could draw a background img with text and apply that image to the link or the button.
Even if with this solution you lose in accessibility.
Alternatively you can use conditional CSS statements to improve the layout for each browser.
You could also consider replacing the the button with a different element altogether. The anchor element works perfectly. Just add a 'submit' function to it's 'onClick' event and you'll be good to go. I think this is a better (and simpler) cross browser solution.