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've found an interesting post about webkit pseudo elements for inputs here, so I was going to remove the cancel button from input type="time". But by murthy's law exactly this pseudo element is not described anywhere.
P.S. I already tryed
::-webkit-search-cancel-button
::-webkit-input-cancel-button
::-webkit-time-cancel-button
::-webkit-time-cancel-button
Of course there is a way to do this with :after element, but I don't believe there is no pseudo element for this
input[type="time"]::after
{
content: "";
background: #FFF;
height: 20px;
width: 10px;
position: absolute;
margin: 0 -10px;
}
That would be ::-webkit-clear-button
So use
input[type="time"]::-webkit-clear-button{
display:none;
}
To find such things you can enable Show Shadow DOM from the console options, under Elements.
This way when you select the input element, you can open it and look under the hood..
I knew that Internet Explorer 10 supports such a pseudo-element with ::-ms-clear.
So I searched in the source code of Chromium for "webkit-clear" and discovered the presence of ::-webkit-clear-button.
This JSFiddle shows that the ::-webkit-clear-button pseudo-element has the desired effect.
input[type="time"]::-webkit-clear-button {
display: none;
}
This question was asked before but the solution is not applicable in my case. I want to make sure certain background images are printed because they are integral to the page. (They are not images directly in the page because there are several of them being used as CSS sprites.)
Another solution on that same question suggests using list-style-image, which only works if you have a different image for every icon, no CSS sprites possible.
Aside from creating a separate page with the icons inline, is there another solution?
With Chrome and Safari you can add the CSS style -webkit-print-color-adjust: exact; to the element to force print the background color and/or image
Browsers, by default, have their option to print background-colors and images turned off. You can add some lines in CSS to bypass this.
Just add:
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
color-adjust: exact !important; /* Firefox 48 – 96 */
print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
}
I found a way to print the background image with CSS. It's a bit dependent on how your background is laid out, but it seems to work for my application.
Essentially, you add the #media print to the end of your stylesheet and change the body background slightly.
Example, if your current CSS looks like this:
body {
background:url(images/mybg.png) no-repeat;
}
At the end of your stylesheet, you add:
#media print {
body {
content:url(images/mybg.png);
}
}
This adds the image to the body as a "foreground" image, thus making it printable.
You may need to add some additional CSS to make the z-index proper. But again, its up to how your page is laid out.
This worked for me when I couldn't get a header image to show up in print view.
You have very little control over a browser's printing methods. At most you can SUGGEST, but if the browser's print settings have "don't print background images", there's nothing you can do without rewriting your page to turn the background images into floating "foreground" images that happen to be behind other content.
The below code works well for me (at least for Chrome).
I also added some margin and page orientation controls.(portrait, landscape)
<style type="text/css" media="print">
#media print {
body {-webkit-print-color-adjust: exact;}
}
#page {
size:A4 landscape;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin: 0;
-webkit-print-color-adjust: exact;
}
</style>
Make sure to use the !important attribute. This dramatically increases the likelihood your styles are retained when printed.
#example1 {
background:url(image.png) no-repeat !important;
}
#example2 {
background-color: #123456 !important;
}
Like #ckpepper02 said, the body content:url option works well. I found however that if you modify it slightly you can just use it to add a header image of sorts using the :before pseudo element as follows.
#media print {
body:before { content: url(img/printlogo.png);}
}
That will slip the image at the top of the page, and from my limited testing, it works in Chrome and the IE9
-hanz
Use psuedo-elements. While many browsers will ignore background images, psuedo-elements with their content set to an image are technically NOT background images. You can then position the background image roughly where the image should have gone (though it's not as easy or precise as the original image).
One drawback is that for this to work in Chrome, you need to specify this behavior outside of your print media query, and then make it visible in the print media query block. So, something like this...
.image:before{
visibility:hidden;
position:absolute;
content: url("your/image/path");
}
#media print {
.image{
position:relative;
}
.image:before{
visibility:visible;
top:etc...
}
}
The drawback is that the image will often be downloaded on normal page loads, adding unnecessary bulk. You can avoid that by just using the same image/path you'd already used for the original, visible image.
it is working in google chrome when you add !important attribute to background image
make sure you add attribute first and try again, you can do it like that
.inputbg {
background: url('inputbg.png') !important;
}
Browsers, by default, have their option to print background-colors and images turned off. You can add some lines in CSS to bypass this. Just add:
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
Note: It's not working on the entire body but you could speciy it for a inner element or a container div element.
You can use borders for fixed colors.
borderTop: solid 15px black;
and for gradient background you can use:
box-sizing: border-box;
border-style: solid;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-image: linear-gradient(to right, red, blue) 100%;
border-image-slice: 1;
border-width: 18px;
https://gist.github.com/danomanion/6175687 proposes an elegant solution, using a custom bullet in place of a background image. In this example, the aim is to apply a background image to an a element with class logo. (You should substitute these for the identifier of the element you wish to style.)
a.logo {
display: list-item;
list-style-image: url("../images/desired-background.png");
list-style-position: inside;
}
By including this within a
#media print {
}
block, I'm able to replace a white-on-transparent logo on the screen, rendered as a background-image, with a black-on-transparent logo for print.
You can do some tricks like that:
<style>
#page {
size: 21cm 29.7cm;
size: landscape
/*margin: 30mm 45mm 30mm 45mm;*/
}
.whater{
opacity: 0.05;
height: 100%;
width: 100%;
position: absolute;
z-index: 9999;
}
</style>
In body tag:
<img src="YOUR IMAGE URL" class="whater"/>
I am using the following CSS class to hide a textbox in an asp:UpdatePanel to accept input from a USB card reader.
<style type="text/css">
.USBBox
{
position: absolute;
left: -999em;
}
</style>
When I click an asp:LinkButton control that is configured to be an asp:AsyncPostBackTrigger for the update panel the control appears on the page and the CSS class is not applied to the asp:TextBox control.
This behavior is displayed in IE7. It works as expected in FireFox 3.5.7
What would cause this behavior and how do I resolve it
There my be a specificity issue. Try
input.USBBox{
position:absolute!important;
left:-999px!important;
}
And if it works, back out of the !important tags to see what actually caused the issue.
Also declare display:block; just in case.
I think you should use:
.USBBox
{
display: none;
}
or maybe use a asp:HiddenField instead of a textbox.
try
.USBBox
{
display: block;
width: 100px; /* or however wide you want it */
position: absolute;
left: -999em;
background: #ff0000; /* visually ensure the class style is being applied, remove it later */
}
position should only work on items that are displayed as a block. form items by default are displayed inline.
also just for giggles set the background color just to make sure the input box is taking class.
Could it be that the new control comes with multiple classes ?
Because IE is having issues when combining classes on a single element..
Take the following code:
<abbr title="World Health Organization">WHO</abbr>
Can we style an abbr tag's title? So that instead of a custom tooltip we can use title?
Actually, Alex Mcp’s answer is incorrect. It is entirely possible to do this with CSS for modern browsers. However, a fallback for older browsers with JavaScript may be used.
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: yellow;
content: attr(title);
}
This will add an absolutely positioned pseudo element top right of the abbr tag using the attribute content within the title when the abbr tag is hovered over.
If you mean style the actual text that pops up, no you can't style that with CSS; it's browser-specific. Javascript-based tooltips would be the way I would handle it, since it allows to have more control over this behavior.
I was looking for something similar and came up with the following alternative (tested on Firefox, Safari and Chrome on Mac, works with IE 7-10 when I clicked it), based on this link:
HTML:
<abbr title="My Custom Abbreviation" name="">Abbreviation</abbr>
jQuery:
$('[title]').each( function() {
var mytitle = $(this);
mytitle.data('title',mytitle.attr('title')); // get title attribute value
mytitle.attr('name', mytitle.attr('title')); // add title attribute value to NAME attribute
mytitle.removeAttr('title'); // remove the title attribute, removing browser tooltip
});
CSS:
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: yellow;
content: attr(name);
}
You can style the way the shortened version appears, so in this case 'WHO'. But not the way the pop up box appears, as that is controlled by the browser/OS.
You can get around this limitation by applying some JQuery stuff to any abbr tag programatically - this would display a div, of which the contents would read the same as the title on the tag that called it.