Using jade template with doctype html at the top.
Styling for input and select:
input, select {
...
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
input's border radius is shown correctly, but the select's border shows 5px, which is the user agent's value, even though investigating in the calculated tab shows 3px, from the style above, should be applied.
How is it possible that my style seems to have been applied, but the calculated value and the look of the select, do not match my style?
Please note that I am not trying to get rid of or replace the drop down arrow, I just want my input and select to have the same border-radius, but while the input looks good, this weird issue is happening with the select
Dev tools clearly shows that the user agent's 5px for border is being crossed off, and yet, this is the value being shown in the calculated value and visibly being applied to the element.
Any hints would be appreciated.
This is a little dated but I figured it should be answered nevertheless.
You have to add appearance: none to apply styling to those elements.
The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.
For more details see https://css-tricks.com/almanac/properties/a/appearance/
input, select {
width: 150px;
border-radius: 50%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<select>
<option>foo</option>
<option>bar</option>
</select>
<br>
<br>
<input>
Related
I have a style for inputs on my page, with some basic padding and font size, I tried applying the same style to a link, but for some reason the link is always larger (height) than the button no matter what I do, even with the exact same text and font size, I tried doing display: block but that just makes the button the width of the screen.
Here is the CSS:
.button{
padding: 10px 15px 7px 15px!important;
font-size: 16px !important;
color: white;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
}
.button-3{
background-color: #ff4d4d;
border: 1px solid #ff4d4d !important;
}
I've looked at the Chrome styles panel and confirmed the font / padding is being used (it's not strikken through).
Here is what it looks like:
Looks like the issue is because:
You aren't using a CSS reset.
The line-height needs to be the same.
Make sure you give a consistent line-height to both. For now, set in the both:
line-height: 1.5;
This should fix it. Also, you can compare both the styles with the computed ones, to check if there's anything else being set. Since you say <button>, it might also have some border.
Also, like I guessed, you are also giving border and same colour as background to the button, making it look 2px bigger.
When you open the Developer Tools, try comparing the Computed Styles part:
To avoid this kind of stuff I always set the font family I used.
Take a look at this example: https://fiddle.jshell.net/tnr0jxka/
You also might want to consider adding:-webkit-apperance:none;-moz-apperance:none; to this kind of css, it will save you big time in cross-browser experience.
Buttons do not inherit the global styling automatically.
So, setting font-size of button explicitly will solve the problem
see this solution for more info
On Chrome (chromium), IE and Opera browsers, but not Firefox, I have long boxes that are unsightly (made much worse when hover shadow effects are utilised).
The code which produces this effect must occur more than once as it only disappears when I delete a couple of my css files.
There is no specific mention of type="radio" in my css files. The form that the radio buttons are attached to has its own class.
To try and reset the css relating specifically to the radio buttons I used
#resetter {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
And then set the id of the radio buttons to "resetter", but no apparent change. If there is some way to remove this errant css affecting the radio buttons I would be delighted! (For the record I marked every line of the above with !important, just to be sure.
The fact that it didn't crop up in Firefox helped me solve the problem: it wasn't a border but a shadow.
Specifically:
-webkit-box-shadow: rgba(?, ?, ?, ?) ?px ?px ?px;
When substituted with:
-moz-box-shadow: ?px ?px ?px #?;
Compatibility was maintained with firefox, without resulting in ugly boxes on other browsers
I'm playing around with a firefox extension written in XUL, and wanted to customize the style of a textbox element.
Here is what I've come so far (CSS file) :
textbox.custom-style {
-moz-appearance: none;
border-radius: 3px;
box-shadow: 0 1px #CCC inset;
background: #FFF;
border : solid 1px #CCC;
}
The style applies correctly but when I've added this rule to alter the style a focused textbox, it doesn't seem to work.
textbox.custom-style:focus {
border : solid 1px #ACC;
}
I've tried the same rules for a button element and it seems to work OK (when I 'tab' to the button, it gets focus and change its style as expected)
So what am I missing here? Is this a known bug? I've looked around for a bug report or a workaround but to no avail.
For <textbox> element, a special attribute focused is added whenever the element has the focus. You can check for the presence of this attribute to determine if the element has the focus within a style sheet. It will have the value true.
This is because actually focus is in <html:input> element which is inside <textbox> element.
I'm trying to style the dropdown arrow of a <select> element with CSS only , it works perfectly in Chrome/Safari:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url('./select-arrow1.png') ;
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
margin: 0;
padding-top: 2px;
padding-bottom: 2px;
width: 200px;
}
Which renders beautifully as seen here
By that logic, the only thing I had to do to make it work in Firefox was to add all -webkit-* stuff as -moz-* :
-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;
It works for 99%, the only problem is that the default dropdown arrow doesn't go away, and stays on top of the background image as seen here
It looks like -moz-appearance: button; does not work for a <select> element. Also -moz-appearance: none; has no effect to remove the default dropdown arrow.
So what is the correct value for -moz-appearance to remove the default dropdown arrow?
Updates:
December 11, 2014: Stop inventing new hacks. After 4 and a half years, -moz-appearance:none is starting to work since Firefox 35. Although moz-appearance:button is still broken, you don't need to use it anyway. Here is a very basic working example.
April 28, 2014: The mentioned css hack worked for a couple of months but since the begining of April 2014 this bug is creeping back into Firefox 31.0.a1 Nightly on all platforms.
Update: this was fixed in Firefox v35. See the full gist for details.
== how to hide the select arrow in Firefox ==
Just figured out how to do it. The trick is to use a mix of -prefix-appearance, text-indent and text-overflow. It is pure CSS and requires no extra markup.
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Long story short, by pushing it a tiny bit to the right, the overflow gets rid of the arrow. Pretty neat, huh?
More details on this gist I just wrote. Tested on Ubuntu, Mac and Windows, all with recent Firefox versions.
This is it guys! FIXED!
Wait and see: https://bugzilla.mozilla.org/show_bug.cgi?id=649849
or workaround
For those wondering:
https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59
First, because the bug has a lot of hostile spam in it, it creates a hostile workplace for anyone who gets assigned to this.
Secondly, the person who has the ability to do this (which includes rewriting ) has been allocated to another project (b2g) for the time being and wont have time until that project get nearer to completion.
Third, even when that person has the time again, there is no guarantee that this will be a priority because, despite webkit having this, it breaks the spec for how is supposed to work (This is what I was told, I do not personally know the spec)
Now see https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)
The page no longer exists and the bug hasn't be fixed but an acceptable workaround came from João Cunha, you guys can thank him for now!
To get rid of the default dropdown arrow use:
-moz-appearance: window;
Try putting opacity:0; your select element will be invisible but the options will be visible when you click on it.
It is worth trying these two options below while we're still waiting for the fix in Firefox 35:
select {
-moz-appearance: scrollbartrack-vertical;
}
Or
select {
-moz-appearance: treeview;
}
They will just hide any arrow background image you have put in to custom style your select element. So you get a bog-standard browser arrow instead of a horrible combination of both the browser arrow and your own custom arrow.
In Mac OS X, -moz-appearance: window; will remove the arrow accrding to the MDN documentation appearance (-moz-appearance, -webkit-appearance).
It was tested on Firefox 13 on Mac OS X v10.8.2 (Mountain Lion). Also see: 649849 - Make -moz-appearance:none on a combobox remove the dropdown button.
While you can't yet get Firefox to remove the dropdown arrow (see MatTheCat's post), you can hide your "stylized" background image from showing in Firefox.
-moz-background-position: -9999px -9999px!important;
This will position it out of frame, leaving you with the default select box arrow – while keeping the stylized version in Webkit.
it is working when adding :
select { width:115% }
I'm currently writing some stylesheets for mobile browsers and have come across a strange issue in the Android browser. When changing the font-size CSS attribute of a text box the box gets bigger to accomodate the larger text. Doing this on a select box however does not change the size of the select box, but the text still gets larger (actually overlapping the top and bottom of the rendered form element).
Can anyone tell me if it's possible to increase the height of select boxes in the Android browser. Or if not point me in the direction of a list of CSS attributes that can be applied to them.
Thanks.
Another option you can use (tested on galaxy S running android version 2.1-update1):
select {
-webkit-appearance: listbox;
}
select, input {
width: 100%;
height: 40px;
line-height:40px;
border: 1px solid #999;
border-radius: 6px;
margin-bottom:10px;
}
This way the inputs and selects all look the same, clicking the select will open the options menu as usual.
This seems to be a browser bug. You can also reproduce it when you set your browser's text size to 'huge' (in settings). I added a new issue and suggest a workaround with a custom background image for now:
<select style="background: url('big-select-bg.png')"/>
try this one:
select{
-webkit-appearance: menulist-text;
}
Set the opacity of the select control to 0
Then place a span contorl styled to look like a textbox behind the select control so that the select control are sits directly on top of the span.
The user won't see the select control but when the user attemps to enter text into the span the dropdown options for the select control will appear.
After the user makes their selection use javascript to update the innerHTML of the span with the value of the select control.
Make sure the dimensions of the span and the select control line up well.
(Do not use an actual texbox control)
mealaroni.com
For me "-webkit-appearance: listbox;" solved the issue not completely.
I had to add a padding attribute additionally:
select {
-webkit-appearance: listbox;
width: 100%;
height: 35px;
line-height: 35px;
border: 1px solid #bbb;
border-radius: 4px;
padding: 0 0 1px 8px;
}