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
Related
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>
I came across a little browser compatibility issue.
i have a search input field <input type="search">
and while in Chrome the height is exactly as i want it to be (30px),
the height in IE is always 2px more (32px)
heres the css code:
.search_field{
width: 80%;
height: 30px;
border: solid;
border-width: 1px;
border-color: #eeeeee;
margin: 5px 0 5px 0;
padding: 0px;
}
.search_field:focus{
outline-width: 1px;
outline-style: solid;
outline-color: #919191;
}
html:
<li>
<b>Search</b><span style="float: right; font-size: 10px;">Advanced Search</span><br>
<input type="search" class="search_field">
<input type="submit" value="Search" class="search_input">
</li>
Are there any other IE defaults besides those i already tried to change?
Thanks!
I think, it's because of border you are adding with it. So, 1px from top and 1px from bottom, this way it's taking 2px more than it. Try fixing this once.
if not even this works, then you can add some css hacks like:
_height : 28px; /* IE 6 */
*height: 28px; /* IE 7 */
Note: Keep this in mind that these are not valid css. I mean when you will validate it, it won't. Take reference: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
Are there any other IE defaults besides those i already tried to
change?
You can easily inspect your element style attributes using The IE Developer tool.
Just hit the F12 key and inspect your input search field.
Click the arrow button inside of the Developer Toolbar window at the bottom of the screen and select which Element needs to be inspected by placing the cursor over the Element and then click on that Element
Add the following CSS code, as suggested by #Passerby in a comment:
.search_field { box-sizing: border-box; }
The reason is that otherwise the height property specifies the content width, excluding padding and border, and the 1px borders above and below thus make the total height 30 + 1 + 1 pixels. The box-sizing property can be used to override this.
Arguably, IE (and Firefox) is doing the right thing here, since the HTML5 CR says, in the section about form field rendering, that in “standards mode”, an input element with type=search has normal CSS sizing, whereas in Chrome, it has box-sizing: border-box in the browser style sheet.
I cannot manage to apply "padding" to checkboxes on IE11, so that they behave the same as on IE10.
On IE10, the computed style for checkboxes was:
width: 13px;
height: 13px;
padding: 3px;
margin: 0;
On IE11, it is now:
width: 13px;
height: 13px;
padding: 0;
margin: 3px;
Although the checkboxes have the same size on both browsers, their behaviour has slightly changed. On IE10, the 3 pixels padding was causing the checkbox to "hover" when passing the mouse 3 pixels around the edges of the box. This is no longer the case on IE11, reducing the clickable area by that many pixels on each side.
I have tried applying the same style as on IE10 to the checkboxes, without any success (see http://jsfiddle.net/LSjb4/). The padding seems to be ignored. I've also tried playing with the width and height (as you would do on Chrome for instance), but this is causing the box to visually stretch.
Can anyone think of a pure CSS solution to get the same behaviour as IE10, retaining the native look of the checkbox (no image please)?
NOTE: please spare the "why are you trying to do that, it's bad for user experience etc." comments. Consider it as a technical challenge with no other purpose than the satisfaction to solve it :)
http://jsfiddle.net/8xmpw/
HTML
<label for="ie11" class="ie11">
<input type="checkbox" id="ie11" />
</label>
CSS
.ie11 {
padding: 3px;
}
.input[type=checkbox] {
vertical-align:bottom;
}
This create a 3px padding area around the label box that allow you to click checkbox without hover entirely into the checkbox.
But this leads another problem that there is a small margin where IE11 has default margin preset. (I am guessing 1px top, 3px bottom)
I think the best you can do is using vertical-align to make either top or bottom border or checkbox clickable;
IMHO:
IE 10 rectangle checkbox perceived as content and 'padding' showed as distance out rectangle.
IE 11 as content perceived contents inside the rectangle and 'padding' just ignor.
Google Chrome browser also behives as IE 11 and ignore padding for checkbox.
For the same display your page in IE10 and in IE11 you must don't use padding for checkbox.
Simple solution is force IE11 simulate IE10 with through use
<meta http-equiv="X-UA-Compatible" content="IE=10">
P.S.
I also was unpleasantly surprised when discover that different behaviour in IE11 and IE10.
I am using Bootstrap.css which inside had classes .checkbox-inline and .checkbox.
If use these css classes, the boxes moved down relatively to label(.control-label).
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 7px;
margin-top: 0;
margin-bottom: 0;
}
For the same display in IE10 and IE11 I rewrite this classes (of course in other css file)
.form-horizontal .checkbox,
.form-horizontal .checkbox-inline {
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
}
I know that my english isn't so good, but i hope you are understood!-)
I met the same problem recently, and solved by wrapping around <checkbox> by <span> (jQuery required)
Then move the class of <checkbox> up to the <span>, and defined some special styles for ie11
// IE11 or above
if(!!(navigator.userAgent.match(/Trident/) && ! navigator.userAgent.match(/MSIE/))){
$(function(){
$("input[type=checkbox]").wrap(function(){
return "<span class='" + $(this).attr("class") + " ie11'>";
});
$("input[type=checkbox]").removeClass();
});
}
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 have been pulling my hair out trying to get Chrome to style my search input with a background image. Firefox has no problem, but I fear it's because it treats the input as a regular text input. Is this simply not possible?
Try this as a demo:
<input type="search" />
input[type="search"] {
background: transparent
url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0;
}
If it worked correctly, it should put Google's logo (or part of it) as the background image for the "Search" input. But as you will see when you look at this in Chrome, it DOES NOT WORK. Any ideas, or is this just one of HTML5's quirks? :\
You can get Chrome (and Safari) to play along better with your styles on an HTML5 search field (including background images) if you apply this in your CSS:
-webkit-appearance: none;
You may also want to change -webkit-box-sizing to...
-webkit-box-sizing: content-box;
...since it appears that Webkit defaults this to the border-box value (basically the old IE5 box model).
Be warned, there's still no (apparent) way to have any effect on the position/appearance of the field-clearing button, and since only Webkit generates that button, you may find some new cross-browser annoyances to deal with.
Complete solution to remove all extra design caused by browser. This will change the search field to normal input field
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
input[type="search"]{
-webkit-appearance: none;
-webkit-box-sizing: content-box;
outline:none;
}
Like you said, Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML wrapper for the internal Webcore Cocoa NSSearchField. This is what gives it the round edges and the 'x' button to clear itself when there is text within it. Unfortunately it seems that not only are these extra features inaccessible by CSS/JS for the time being, but it also seems that there's no W3 specification for what CSS properties can be applied to this element as well as other new HTML5 elements. Until there is such a specification I wouldn't expect to have consistent behavior.
The cancel button can be styled with the following
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
height: 10px;
width: 10px;
background: red;
/* Will place small red box on the right of input (positioning carries over) */
}
Styling can be removed using
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
http://css-tricks.com/7261-webkit-html5-search-inputs/