I have a input select box and I have to align the text in this box.
In Google Chrome, Firefox and IE <= 9 it works fine.
But the Safari don't use the padding..
Here my code:
<select class="anrede1">
<option>Frau</option>
<option>Herr</option>
</select>
.anrede1, .land {
font-family:'Roboto Condensed';
font-size: 22px;
color: #575656;
margin: 10px 10px 10px 0px;
width: 100%;
height: 42px;
text-align: left;
padding-left: 17px;
border: 2px solid #e1eef9;
font-weight: 300;
}
http://jsfiddle.net/jhne7pfe/
Some ideas to fix that?
Its a late answer but I was searching for a solution to the same problem for a while. Using text-indent shifted the elements around the input element and the padding was still ignored.
-webkit-appearance: textfield;
Using that solved my problem, hope this saves someone else time.
as far as I know W3 specs don't allow to use padding in select fields. So Safari doesn't support it.
But you can use the following instead of padding-left:
text-indent:17px;
This should work fine.
Not sure, if my last comment reply came through:
As I don't have a Safari installed here, I hope this helps. Try to use:
padding-left:17px;
-webkit-padding-start:17px;
instead of
text-indent: 17px;
The -webkit-padding-start is for chrome and safari browsers only and should be ignored automatically, if padding-left works.
Unfortunately I also have no jsfiddle account yet.
Will be done as soon as possible ;-)
Related
I'm testing designed page with CSS and html with different browser. When I test with chrome page working correct , but not working correct in Firefox. I didn't use strange style, Just used the margin , padding and border radius. I don't know why not working. Thanks for guiding.
background-color: #7B618F;
padding-top: 30px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
border-radius: 0 0 10px 10px;
margin-right: 2px;
margin-left: 2px;
font-size: 12px;
color: #fff;
in Firefox
in Chrome
It happens sometimes, I think it's a bug. I was using chrome and I had this type of problem so I switched to edge and firefox but sometime later it was also not working. But after rebooting my pc everything was okay.
I find solution for this problem. It's problem for right to left direction used in CSS style , when I use dir in division tag working correct in Firefox.
resolved
<div class="h-left" dir="rtl">
My Login-Form doesn't work on FIREFOX.
You just can't write inside the fields (or at least it appears like that).
In Chrome everything works fine and also in IE, as far as IE allows it.
Here is my fiddle:
http://jsfiddle.net/W39EA/6/
I already debugged it and found that the lines, which are causing the error in Firefox are these:
.access .form-control {
padding: 21px 15px;
margin: 10px 0px;
}
They are at the very bottom of the Fiddle.
If I remove them, Firefox works again. But I actually need them to add the necessary padding to my Input-Fields.
Has anyone a suggestion for solving this problem?
It's because you have so much padding on the input fields. You could just set the height of the input field, and then only add a bit of top and bottom padding. -
If you change the input CSS to:
.access .form-control {
padding: 5px 15px;
margin: 10px 0px;
height:40px;
}
That should fix the problem - jsfiddle.net/W39EA/7
I think this problem came beacuse Firefox uses box-sizing property for input is different from the Chrome and IE.
So that I have added "box-sizing:content-box" in your css. After that I got the same kind of results in both the browsers. You can reduce the padding size based on your requirement now.
.access .form-control {
padding: 10px 7px;
margin: 10px 0px;
-moz-box-sizing:content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
I have always used the "trick":
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
to do custom select boxes on FF but since version 30 is released this stopped working completely. I have tried to find if this was deprecated but couldn't find anything. Is there a workaround, or another method to replace this?
Update
As of January 2015, this now works again with the release of Firefox 35. See the answer below for historical reference.
Background
The hack that was used is this:
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
In my testing, on FF 29, -moz-appearance:none; had no affect. What caused the arrow box to not appear was the second two lines. It said that any overflow is to be replaced by an empty string, and then it used text-indent to cause the select to overflow. Since the arrow box is rendered as a single element, similar to a single letter, this caused it to be replaced by the empty string.
What Happened
Someone at Mozilla noticed that if you have padding on a dropdown select, the arrow doesn't change size. According to the bug report, this issue has now been fixed:
The problem is that this has divorced the arrow from normal CSS rules. I've tried padding, text-indent, margin, white-space, text-wrap, and a few more, and I can't find anything that will affect it. Elsewhere around the internet, people are saying the same thing, unfortunately.
What Now
We have a few options. You can use an overlay combined with pointer-events:none to style the dropdown however you want: Tutorial
You can create a completely separate dropdown to replace select, using Javascript: Tutorial
We can also watch the request on Firefox's Bugzilla, and hope that someday they will create a non-hacky way to do this. PLEASE NOTE: Don't go there and start posting comments about wanting it. Part of the reason it's been so delayed is that people threw a fit. It may help to vote for the issue.
Update Sept. 2014
This is now being actively worked on for Firefox. 2 patches have been submitted and have been awaiting review for a week. Most probably scenario is that this makes it into FF35 Aurora, and we have a few weeks for it to get reviewed and approved before the cutoff date (Firefox operates on a 6 week release schedule). It could also be delayed, and it could even theoretically be "uplifted", meaning patched in the current Aurora and Beta versions, to get released sooner.
Update Oct. 2014
This how now been officially resolved! Kind of. A patch to allow users to hide the dropdown arrow element has been committed and will be shipped with Firefox 35 in January 2015.
This will only allow users to hide the arrow. To style it is another issue, which has been spun off into another bug ticket which will be considered in the future.
Update Jan. 2015
This has now been fixed! Firefox 35 came out on January 13, and you can now use -moz-appearance:none to remove the arrow.
Yes ! Is good ! Thks
JS FIDDLE
.customSelect {
font-size: inherit;
margin: 0;
padding: 0.5em;
background-color: transparent;
color: #393939;
opacity:1;
-moz-appearance: none;
border: 0 none;
border-radius: 0px;
border:1px solid #B1B2B3;
padding-right: 2.5em;
}
.SelectBox select {
background: transparent;
width: 182px;
padding-right: 29px;
font-size: 100%;
text-indent: 0.01px;
text-overflow: "";
border: none;
height: 17.5px;
-webkit-appearance: none;
-moz-appearance: none;
}
.SelectBox {
width: 154px;
height: 15.8px;
overflow: hidden;
background: url("Images/Arrow.png") no-repeat 141px center #ffffff;
border-radius:2px;
border: 1px solid #B90F22;
}
<div class="SelectBox">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
This seems to work fine in every major browser but IE. IE is falling back to the default dropdown so that shouldn't be too much of a problem.
The response provide by Mozilla Firefox to this issue is just unacceptable. The browser is broken and is nothing more than an open sore for malicious code. They promote the V29-30 browser as a security update, but it took over a week since the release date for a notification to appear for V30.
My own response will be to do nothing and I encourage all other developers to do the same. Eventually users will get tired of the design inconsistencies and abandon Mozilla Firefox like they have been in even greater numbers.
If a reasonable support request is meet with sheer contempt and other browsers can do it but Mozilla Firefox no longer can. It’s not me that has to fix my code, but Mozilla Firefox has to fix theirs!
You can use this solution for firefox, using vendor pseudo class :-moz-any() and pointer events only for mozilla and do not affect other browsers, because both is valid since version 3.6.
here is a jsbin example
http://jsbin.com/pozomu/4/edit
Although it's a quite dirty hack, you can fix this by adding another overlay element above the arrow down in the CSS of your select wrapper (in my case .form-control-select):
/* The arrow */
.form-control-select:after {
content: "\f078";
z-index: 3;
pointer-events: none;
position: absolute;
right: 10px;
top: 9px;
padding: 6px 7px;
font-size: 10px;
}
/* the white overlay to hide Firefox' arrow */
.form-control-select:before {
position: absolute;
right: 1px;
top: 2px;
bottom: 1px;
width: 20px;
background: #fff;
content: "";
z-index: 2;
border: 1px solid transparent;
border-bottom-right-radius: 3px;
border-top-right-radius: 1px;
pointer-events: none;
}
My HTML:
<div class="form-control-select">
<select class="form-control">
<option value="1">one</option>
<option value="2">two</option>
</select>
</div>
I fixed my this issue by giving some style to div and select individually.
Anyone can change his width and other style properties a/c to needs. :)
Here is the js fiddle for it. JSFIDDLE
tested on all the browsers.
select::-ms-expand for IE and -webkit-user-select: none for chrome.
<div class="common-dropdown-small-div" style="width: 220px">
<select id="select" class="common-dropdown-project-select">
<option>
apple
</option>
<option>
blackberry
</option>
<option>
pumpkin
</option>
</select>
</div>
.common-dropdown-small-div{
border: 1px solid rgb(208, 208, 208);
border-radius: 5px !important;
overflow: hidden;
}
.common-dropdown-project-select{
width: 100% !important;
background-image: url("http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png");
background-position: 97% 60%, 0 0 ! important;
background-repeat: no-repeat;
background-size: 25px 16px;
border: none ! important;
outline : medium none !important;
display: inline-flex !important;
height: 33px !important;
vertical-align: top;
-webkit-appearance: none;
}
select::-ms-expand {
display: none;
}
One option is to wrap the select elements in container elements with overflow: hidden. Increase the width of the select elements to push the down arrow to the right and out of the picture. Then add a border to the container elements that matches the select elements.
.select-container {
overflow: hidden;
display: inline-block;
height: 33px;
border-right: 1px solid #B3B6BD;
}
.select-container select {
width: 113%;
}
The problem is that that this will affect styles set on focus or validation errors, which is why I ended up doing what totas suggested and covering the arrows with pseudo-elements.
What is the issue?
There is a input box with height 36px as show in above image.
In IE10 placeholder is not vertically middle.
For all inputs just give
line-height:normal;
it will take normal line-height and will work fine in all browsers.
I usually set a height and line-height to the input[type=text] and inherit these properties to ::placeholder.
height: inherit;
line-height: inherit;
You can use waterwark js to fix this issue.
http://jsfiddle.net/maxim75/yJuF3/
Check out fiddle.
<input type="text" id="Text1" />
For anyone coming to this late--I found a solution that worked in Twitter Bootstrap (3.1) as well as a few other tests I ran.
Simply add to the input element:
height: inherit;
vertical-align: middle;
Solution:
Applied same 36px line-height to input[type="text"].
Side effect:
Before giving line-height: 36px it was working fine in all browser. As I applied
36px line-height to input[type="text"], below is what happened in Safari:
Second Solution:
Apply line-height with IE hack.
That is as follows
input[type="text"] {
line-height: 36px\9; // CSS Hack only for IE.
}
Adding line-height for placeholder on Firefox specifically fixes the issues. Otherwise adding line-height to ::placeholder breaks Safari.
&::-moz-placeholder {
line-height: 36px; // this should be equal to height of the input
}
The accepted answer of line-height:normal; worked for me in almost every circumstance. But Firefox when the input height is specified in px was still giving me issues. I ended up needing to target the browser for this. I used the WordPress global $is_gecko, but there are many other solutions for other platforms out there for targeting the browser with a class, which I find to be the more durable solution than using any -moz hacks. It sucks targeting specific browsers, but sometimes it's needed.
Not sure why, but line-height: revert; seems to work in Firefox. Seems like if the main input has line-height: normal, then setting the placeholder explicitly to line-height: normal as well should have the exact same effect as line-height: revert but it does not seem to work that way in ff.
input.special-field {
height: 48px;
line-height: normal;
}
input.special-field::placeholder {
height: inherit;
line-height: normal;
vertical-align: revert;
}
.gecko input.special-field::placeholder {
line-height: revert;
}
Try to use this:
vertical-align:middle;
I have a minor CSS problem, but I'm having trouble fixing it because I don't have any computer handy with IE7 installed...
In IE8, Chrome, FF, etc. I see this (correctly):
but IE7 gives me this:
the HTML code follows:
<div id="hub">
<div class="title highlight">Faster, Cheaper, Better</div>
<p>PNMS...
the relevant CSS code follows:
#hub {} /* literally nothing */
#hub div.title {
font-size: 4em;
font-style: italic;
font-variant: small-caps;
float: left;
margin: 5px 0px 20px 0px;
width: 940px; /* same as parent container */
}
.highlight { color: #ff6633;}
p {
text-indent: 30px;
font-size: 1.3em;
line-height: 1.1em;
letter-spacing: 1px;
margin: 5px;
}
Based on visitor traffic, I need my site to be compatible with IE7 (thankfully NOT IE6). But again, guessing blindly and then running browsershots.org is not a very efficient manner.
Can someone help? Thank you.
Found this somewhere, it may help:
CSS Double padding IE7 Fix
"Nothing is more annoying than finishing a web design, having it dispay just the way you like it in your standards compliant browser (cough download Firefox) only to remember to check it in IE and find it a garbled mess. Today I came across a rather annoying CSS bug in IE7. IE7 doubles the top padding on my navigation menu."
CSS Code
#nav {
clear: left;
padding: 16px 0 0 30px;
}
"And the fix…
Just add display: inline-block to the div with double padding. That’s it… I know, it’s ridiculous."
#nav {
clear: left;
display: inline-block;
padding: 16px 0 0 30px;
}
Another alternative is the parent of the Div which is not displaying correct add the margin: 0 in CSS for it.
Found it. The CSS body tag had a line-height: 18px;
For some reason known only to Microsoft, out of IE7, IE8, IE9, Firefox 3.5~6, and Chrome, only IE7 honored that instruction for a deeply nested div 400 lines further down the CSS sheet.