I'm trying to modify a default select box using CSS. I've already done it. But, some problems are happened at firefox. What I've done still now:
It's the perfect result on all browser except firefox and IE
At firefox, there are the problems:
(1) There are an unexpected border on the right side of the select box
(2) Padding of text of select box is much bigger than other input field.
At IE, same problem happened. There are unexpected and much clear box at the right of the select box:
How can I remove that unexpected line/box from firefox and IE. Also, what can be responsible for the padding problem at firefox?
Well, I've used this tutorial's concept to customize the select box using CSS only. And I've put my code at
jsfiddle.net/w9kFc/1/
(I can't add the select-icon image at jsfiddle from external link. So, I've taken the screenshot locally. But, I've given the image's link at the jsfiddle code. )
This seems to work in IE10: jsFiddle
Added a label around the select.
Replaced the text-indent with padding.
Related
Has any of you had a similar issue to this?
I have two selects on my page. The top one seems to be displaying some weird padding issue but I cannot see to sort it out:
Their CSS and HTML is exactly the same other than the text that is the values for them.
I have tried defining line-height etc but nothing seems to work.
Thanks
I've a website based on Html KickStart and I notice an annoying problem in IE10.
The issue: when you open the web page, the text in the input field is aligned against the left hand side of the field. When you put the focus on it, and start typing, the text jumps to the right (where it is supposed to be, as you can see in other browsers). When the field looses the focus, the text jumps left again, against the side once more. The input field in question is styled.
The problem is clearly visible on the Html KickStart demo site:
http://www.99lime.com/elements/
Here you can also find the css code files etc.
I don't seem to be able to find the cause of this behaviour. Any help would be greatly appreciated.
Check out this css property : https://developer.mozilla.org/en-US/docs/Web/CSS/direction
direction effects the css declaration being used known as text-align:start
which isn't supported by IE 10
I am trying to simply style my select box so the text is centre aligned. It works in Firefox but not in Safari or Chrome. When inspecting the element in Chrome it says the text is centred, however this is not the case. Can anybody see why it is not centred in Chrome and Safari?
http://georgewoolfe.com/yogurtline1.html
It will not work. Your best best is to use a plugin. E.g select menu :http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
That actually replaces the select with a span but retains select functionality.
Well, styling tag is really hard. You have to test different browsers and OS, and hardly you will reach an uniform result.
http://bavotasan.com/2011/style-select-box-using-only-css/
I suggest you to use some alternative component or js replacement that emulate selects behaviour, if you want to style it in an easier way.
http://cssglobe.com/custom-styling-of-the-select-elements/
There's no totally cross browser way of centering the test of a <select> element using just css. Some browsers allow you to do it and some don't.
If you really have to have it centered then I would suggest that you look into using an alternative component like Select2 or Chosen.
I want to completely reset a button's inherited CSS so it behaves exactly like any other inline-block element. However, I've run into a problem where the text of a button is forever stuck vertically-centered.
In the fiddle (and screenshot) below, the button and div have the exact same styles according to the Chrome Developer Console, yet the button's text is vertically-centered, while the div's is not:
http://jsfiddle.net/rgthree/vT3a7/
Anyone know of the property or selector that will completely reset a button, specifically including its label position?
Answer
There's no way in any browser other than Chrome ~25. I reached out to the Chromium project about the it not working in Chrome 27 (see the #winterblood answer & comments). They said this:
The issue is that we now use margin:auto on the anonymous block inside the button to do the centering inside the button in order to get safe-centering. So, unfortunately, there's no way to style it from CSS. That you were able to control this behavior before was really implementation detail leaking out.
So, the true answer is that you cannot style this in any browser, except for Chrome ~25 where -webkit-box-align was inadvertently exposed to, as #winterblood answered.
For webkit you need to override -webkit-box-align with a value of baseline or start.
I have had no luck implementing this in Firefox yet (from a very brief look at it).
In Internet Explorer, there is unnecessary padding that occurs to the left and right within the button when the button name is large. As a result of this, the known solution is to add "width: auto" and "overflow:visible" to the button style, but doing so will inadvertently make the text in the button disappear when the user scrolls the page down and then back up.
I would very much like to use the style I've included so the padding stays removed, but more importantly resolve the issue with the button text disappearing. It's really an odd one!
I've created this DEMO page for you to test the code where it's happening: http://jsbin.com/uhuze3
Note: You'll need IE7 to see the issue, so for those who don't have it, I create this video for you to see the issue. http://screencast.com/t/MTg0NzY2Zj
I was able to resolve this and improve the code a bit.
You can see the code here:
http://jsbin.com/uhuze3/4
This was the old code:
http://jsbin.com/uhuze3
Edit by Johnny5 :
It seem to be the combinaison of "height" and "line-height" that correct the bug.