Browsers have added additional functionality/styling to input[type=number] in the form of up and down buttons.
I was able to remove this styling in Chrome since we're able to view the shadow DOM and figure out an element's corresponding identity.
However, Firefox is another story. Is anybody aware of any way to remove the up and down buttons on input[type=number] in Firefox?
I came across this post, but the extension wasn't sufficient.
/* For Firefox */
input[type='number'] {
-moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Related
Links below are accurate and match up with attached images. Reproduction is possible as described below.
I am developing a website using HTML, CSS, and JavaScript: https://github.com/nkozlo3/PortfolioWebsite.git
Website: https://nkozlo3.github.io/PortfolioWebsite/
The website looks correct on Chrome, Firefox, and Microsoft Edge. Also on laptops of different sizes: Chrome view 1 Microsoft Edge view 1
Firefox view is the same.
But when viewed through Safari, the elements reposition themselves like so:
Safari view 1
To reproduce the problem simply visit the website on Safari through the above link or pull the code from my GitHub (link above) and run it through Safari.
I tried putting this wrapper around the body of my HTML
<div id="wrapper" style="margin-left: auto; margin-right: auto; width: 960px">
and adding this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I was expecting this to force the content to stay in the correct spots across devices and websites, but it did not solve the issue on Safari.
I also tried adding the below reset.css file to my style.css file to normalize across different browsers. This also did not solve the issue on Safari:
/***
The new CSS reset - version 1.8.2 (last updated 23.12.2022)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
pre {
all: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* remove default dot (•) sign */
::marker {
content: "";
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
}
I recently built an app, but after deployment, I noticed that Safari seems to be loading css differently. Everywhere I have a type="button", safari adds an odd white box around the element. It looks terrible. I've looked around on the internet and found this:
input[type="text"],
input[type="button"] {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
It's the closest I've come to finding a solution, but it doesn't work.
Site: timetrackers.net
I'm guessing you're talking about Safari's default :focus styling.
You can use this CSS to get rid of it:
input[type="text"]:focus,
input[type="button"]:focus {
outline-width: 0;
}
Is there any method to override the default styles of Firefox with the default styles of Chrome?
there is a way for override firefox default property ,
you can follow this github to get some default property of browsers
and you can override chrome default style with the webkit --webkit
and mozila provide it with --moz
follow link
https://github.com/sw4/revert.css
and override firefox style
i dont know on firefox browser how can exact do this but i know you can override chrome style with some override on chrome kit on firefox is the sameway with overriding moz attribute create a simple css file link it to your html then add attribute you need to override or change like that `
::-webkit-scrollbar {
width: 15px;
height: 15px;
color : "red"!important
}
for chrome styles and something same for firefox
scrollbar {
/* clear useragent default style*/
-moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
-moz-appearance: none !important;
}
/* the sliding part*/
thumb{
-moz-appearance: none !important;
}
scrollcorner {
-moz-appearance: none !important;
resize:both;
}
` but my code is not exact true need to more explain about "-moz-appearance"
Since a couple of versions (since 29 I think) Firefox adds spinner buttons to a number input. But they do not fit into my Bootstrap powered website. Is there a way to style these buttons so they look less ugly.
I don't think you can style them, but maybe hiding them will already help:
/* Hide spinners for Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* Hide spinners for Chrome */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
until safari 5.1 and maybe 6.0 it was possible to hide the slider-thumb via css
input[type=range].onoff::-webkit-slider-thumb,
input[type=range].onoff::-moz-slider-thumb,
input[type=range].onoff::slider-thumb {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
height:20px; width:20px;
background-color:transparent;
}
worked also in chrome, ff and opera.
now with safari 6.1 and 6.1.1, firefox 25
this css is not hiding the slider-thumb anymore.
what did i miss?
is there a better, more valid code i could use to hide just the thumb?
no jquery solutions please, i work on a native javascript plugin to add touchable audio-wheels, working in different environments. maybe later i will translate this to jQ too.
okay testet..
looks like, the comma separated list of selectors and setting them all ot once is not working anymore. so valid code can be..
input[type=range].onoff::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range].onoff::-moz-slider-thumb {
-moz-appearance: none;
}
input[type=range].onoff::slider-thumb {
appearance: none;
}
but still in FF i can't hide the thumb, how?