How do I correct paddings (in this case padding-top) inside input fields in IE?
So, I want to make a text field, ie. a search text field. This field has an search icon in the left side and the inputted text next to it, separated by a vertical line.
When the field is in :focus, I want show a tooltip saying: ie. "input text here". This text is inside the field and take about a third of the field's height.
So, when in focus i want to push down the inputted text in the field down by a third of the field's height, so i can show both the tooltip and the inputted text without having them overlapping each other.
I managed to do this with only CSS, and it works correctly in every browser but IE.
In IE, the inputted text was pushed down too much, so the bottom half of the text was missing because it was overflowing.
sample: http://codepen.io/ayakashi/pen/emZVed
My Code: (CSS)
.form-2 label{
/*positioning icon in the left side of the text field*/
position:absolute;
padding: 0.5em 0;
text-align:center;
left:0;
color: rgba(0,0,0,0.6);
border-right: solid 1px rgba(0,0,0,0.1);
width: 2.5em;
}
.form-2 .tooltip{
font-size: 0.714em; /*10px*/
text-align:left;
padding-left: 1em;
font-family:Calibri, Helvetica, sans-serif;
font-weight:bold;
color:white;
width:21.7em;
/*positioning tooltip in top of text field*/
position:absolute;
border-radius: 0 0.5em 0 0;
margin-left: 3.5em;
top:-0.5em;
}
input:focus{
padding-top:1em;
}
input:focus, input:focus + .tooltip{
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
HTML
<form role="form" class="form-2">
<div>
<label for="exampleInputEmail1"><i class="fa fa-user fa-lg"></i></label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<p class="tooltip">Username / Email address</p>
</div>
</form>
Identifying line-height appears to solve it for IE9:
.form-2 input{
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2);
padding-left: 3em;
border-radius: 0.5em;
line-height: 1.1em;
}
http://codepen.io/anon/pen/RNaQxY
I managed to find the solution for my problem (tested in CrossBrowserTesting.com using IE9 and IE10) :)
I've just noticed that IE9 and IE10 had a white space at the bottom of the input field that eat up the bottom half of the inputted text, when comparing the result between IE9, IE10, and IE11.
So I added padding-bottom: 0 in input:focus style to remove that space.
And it works. The inputted text appear correctly now. The padding-bottom:0 doesn't seem to affect other browser, since they still show the result correctly.
Related
I've a semi-complicated user registration form that Google Chrome is ruining. As per design, I've moving/animated placeholder which moves out of input to 20px above it on user focus, and stays there if something is in the field. Come Chrome autocomplete, everything is messed up with email field.
So, I assume focus event is not being invoked on autocomplete, hence everything breaks.
Example on JS fiddle, though I'm not getting autocomplete there: https://jsfiddle.net/dxgou68p/1/
label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
<form>
<div class="form-field">
<label>
<input type email placeholder=" ">
<span>Placeholder Text</span>
</label>
</div>
</form>
How can I make it so that autocomplete doesn't rule styling?
EDIT: It is not that color is changed, bur rather span tarnsition efect doesn't do it's thing on autocomplete.
input:-webkit-autofill{
-webkit-text-fill-color: black !important;
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
This should prevent Chrome doing any styling on the inputs
For more info see Removing input background colour for Chrome autocomplete?
I added a dropdown menu with flags in my navbar so I'd be able to move to pages in other languages. here's a link to the dev site where I made my test: my dev site
well as you can see the dropdown is there but links are not working...here's the code itself:
<div id="image-dropdown" style=" float: right; position: relative; top: 30px;width: 45px;">
<a href="http://www.uprightpose.com/">
<input checked="checked" type="radio" id="line1" name="line-style" value="1" />
<!--hyperlink to the language page-->
<label for="line1"></label>
</a>
<a href="http://www.uprightpose.com/home-es-new/">
<input type="radio" id="line2" name="line-style" value="2" />
<label for="line2"></label>
</a>
</div>
and here's the css:
<style>
#image-dropdown {
/*style the "box" in its minimzed state*/
width:80px; height:50px; overflow:hidden;
/*animate collapsing the dropdown from open to closed state (v. fast)*/
-moz-transition: height 0.1s;
-webkit-transition: height 0.1s;
-ms-transition: height 0.1s;
-o-transition: height 0.1s;
transition: height 0.1s;
}
#image-dropdown:hover {
height:200px; /*overflow-y:scroll;*/
/*nice and smooth expand - speed this up at your preference or remove animation altogether*/
-moz-transition: height 0.5s;
-webkit-transition: height 0.5s;
-ms-transition: height 0.5s;
-o-transition: height 0.5s;
transition: height 0.5s;
}
#image-dropdown input {
/*hide the nasty default radio buttons. like, completely!*/
position:absolute;top:0;left:0;opacity:0;
}
#image-dropdown label[for="line1"] {
/*style the labels to look like dropdown options, kinda*/
display:none; margin:2px; height:46px; opacity:0.2;
/*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
background:url("https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg");
background-size: 40px;
background-repeat: no-repeat;
border-radius: 7px;
width: 40px;
height: 30px;
}
#image-dropdown label[for="line2"] {
/*style the labels to look like dropdown options, kinda*/
display:none; margin:2px; height:46px; opacity:0.7;
/*setting correct backgrounds - add additional rules with selectors based on "for" attribute*/
background:url("https://lipis.github.io/flag-icon-css/flags/4x3/es.svg");
background-size: 40px;
background-repeat: no-repeat;
border-radius: 7px;
width: 40px;
height: 30px;
}
#image-dropdown:hover label{
/*this is how labels render in the "expanded" state. we want to see only the selected radio button in the collapsed menu, and all of them when expanded*/
display:block;
}
#image-dropdown label:hover {
opacity:0.5;
}
#image-dropdown input:checked + label {
/*tricky! labels immediately following a checked radio button (with our markup they are semantically related) should be fully opaque regardless of hover, and they should always be visible (i.e. even in the collapsed menu*/
opacity:1 !important; display:block;
}
/*pfft, nothing as cool here, just the value trace*/
#trace {margin:0 0 20px;}
</style>
I know that the input is problematic and it doesn't work with links but...I can do it either way...help someone?
You have a radio button element inside the link. When you click it, the element is being selected (because your link has no text in it, when you pressing the flag - you are actually selecting the radio buttons - without any redirection being initiated). Add an onclick event to the input tag which will initiate the redirection:
<input... onclick='window.location="http://www.uprightpose.com/home-es-new/";' />
Here is a working example with your code and an added onclick which will reload jsfiddle onclick:
<a href="http://www.uprightpose.com/">
<input checked="checked" type="radio" id="line1" name="line-style" value="1" onclick='window.location="https://jsfiddle.net/";' />
<!--hyperlink to the language page-->
<label for="line1"></label>
</a>
I am trying to style buttons in my current cross browser project.
When I checked those buttons in Safari they looked different than in any other browser. In general, buttons looks the same in FF and Chrome. But in Safari buttons have sunknown extra space on top, bottom, left and right sides, so buttons looks wider in Safari rather than in Chrome or other browser. Can I remove the extra space on submit button in Safari?
My current css is:
.location-form-wrapper input[type="submit"] {
border-radius: 0 5px 5px 0;
float: left;
padding: 20px 23.8px;
}
input[type="submit"], input[type="button"], button, input[type="reset"] {
background: #facc26 none repeat scroll 0 0;
border: 1px solid transparent;
border-radius: 5px;
box-shadow: none;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: "latobold";
font-size: 18px;
line-height: 1;
padding: 12px 26px;
text-transform: uppercase;
transition: all 300ms linear 0s;
}
I just came across this very issue, Safari 9.0.2. It might be too trivial, but I just added "margin: 0" to the button's CSS and the - well, margin - went away, letting the button fill the full area I intended for it.
I've a html formular in a part of a website, which only specific administration users can access. In this form, you can upload csv files. As only a small group of users can do this, the functionality is more important than the styling. So I decided not to do the usual trick overlaying a div over the field. I just want to archive one thing: The text in the field should look the in Chrome the same as in FF (vertical and horizontal centered text).
Here you can see the both renderings:
FF: http://i.stack.imgur.com/wbHhG.png
Chrome: http://i.stack.imgur.com/1BFHu.png
HTML-Code:
<input type="file" class="button blue full-width" name="csv_file" id="csv_file">
CSS-Styles:
color: #fff;
height: 50px;
line-height: 50px;
padding: 0 10%;
background-image: url("../images/item-hover-button-addtocart-normal.png");
border: medium none;
margin-bottom: 10px;
background-color: #fff;
text-align: center;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
display: block;
font-size: 14px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
You can fix one of the issues by adding this css:
input[type=file]::-webkit-file-upload-button {
margin: 1px 0;
height: 48px;
}
This makes the button take up more height like in FF and also makes the text vertically centered..
Not so sure how to horizontally center it though, maybe someone else might know a trick.
A jsfiddle to show it working: http://jsfiddle.net/bcwk8qvt/
[edit]
You can make it centered horizontally by adding most of your original CSS to a div wrapped around the input field like this:
http://jsfiddle.net/bcwk8qvt/3/
You still need to keep some of the css on the input field too though for FF to show it the same way.
Make glowing effect around the text box while placing the cursor inside the textbox.
For example : just place the cursor inside the search textbox in our stackoverflow.com.
Its because of css, but i dont know how to achieve it.. Please help me.
Instead of outlines, the box-shadow property achieves a very smooth, nice effect of any text field:
field {
border-color: #dbdbdb;
}
field:focus { /* When you click on the field... */
border-color: #6EA2DE;
box-shadow: 0px 0px 10px #6EA2DE;
}
Here's a JSFiddle Demo I once made myself showing the above code with a transition fade effect.
While the effect you observe on the stackoverflow search box is probably browser specific (e.g. Google Chrome) there is a way to achieve what you want using the CSS :focus pseudo class:
#foo:focus { border: 2px solid red; }
<input id="foo" type="text"/>
Outline property
http://www.w3schools.com/css/pr_outline.asp
If you want it to appear when clicking on a text box:
input:focus { outline: /* whatever */ }
IE7 doesn't support the :focus selector, but you can use jQuery:
$("input").focus(function () {
$(this).css('outline','yellow solid thin');
});
Obviously outline isn't supported by IE7 and even if it was I doubt it would "glow". You need to do this with a custom background image or something. There's an example of doing that here:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084560.html
BTW: You say "border color". A border is not an outline. You can just use:
<input onfocus="this.style.border='2px solid yellow'">
You can do it with the CSS :focus pseudo-class but chances are IE6/7 doesn't support it.
Code-
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
Demo- http://www.labshab.com/submit-guest-posts/
If you're using bootstrap you can use
class="form-control"