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?
Related
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>
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.
I'm using a CSS hover effect on buttons and menu-links. The links work fine because they are anchor tags, while the buttons do not work since they are used in forms as input[type=submit].
The HTML:
<div class="submit">
<span data-hover="Send">
<input type="submit" value="Send">
</span>
</div>
The .submit-wrapper class is used for decoration (as seen in the CSS below), while the span applies the actual hover effect.
The CSS:
.submit /* Need this to hide the second text -- otherwise it will show beneath */ {
overflow: hidden;
}
.submit > span {
position: relative;
display: block;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.submit > span::before /* The effect in place */ {
padding-top: 49px;
content: attr(data-hover);
position: absolute;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
left: 28px;
top: 0;
letter-spacing: normal;
}
.submit:hover > span, .submit:focus > span /* The actual effect on hover */ {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
Here's the problem: I cannot click on the button. It shows the default cursor and completely ignores the fact that it's a button (an input submit type). So I have two questions:
1. Is it possible to use an anchor tag instead of an input type="submit"?
2. If not, how do I make the input type="submit" clickable?
For me, when I put that into jsfiddle, I can't click the button because your translate is moving it offscreen. When I remove that I can click the button just fine.
Otherwise, you can use a link that has jQuery attached to it so when it's clicked, submit the form. see http://api.jquery.com/submit/
What I want is perhaps too simple, and I'm a bit overwhelmed by the responses I find!
***I'd prefer a pure CSS/HTML solution as I don't use javascript.***
What I'm doing at the moment is to use the TITLE attribute within an anchor tag to display information about the link (see: http://www.helpdesk.net.au/index_safety_driver.html and mouseover some of the links).
What I'd like to do is to have something a bit more flexible and interesting for that content and so I'm looking at floating a DIV over a link on hover instead of TITLE (can I leave TITLE in in case the DIV isn't supported - as a failsafe?).
I like the concept at http://www.barelyfitz.com/screencast/html-training/css/positioning/ but would like to have the option of an image in the top left corner.
Here is my updated jsfiddle. Using general css classes which you can reuse and with fade effect and with mouse out delay.
The first two css classes are what you need in your code, rest is just for example.
http://jsfiddle.net/ctJ3d/8/
.popupBox {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.3s,opacity 0.3s linear;
transition: all 0.4s ease;
transition-delay: 1s;
}
.popupHoverElement:hover > .popupBox {
visibility:visible;
opacity:1;
transition: all 0.3s ease;
transition-delay: 0s;
}
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
}
<div id="button" class="popupHoverElement">
<h3>hover</h3>
<div id="two" class="popupBox">Hovered content</div>
</div>
I tried to achieve whatever I understood from your question. Check the fiddle here: http://jsfiddle.net/rakesh_vadnal/RKxZj/1/
HTML:
<div id="button"><h3>button</h3>
<div id="two">Hovered content</div>
</div>
CSS:
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
width:98px;
height: 0;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#button:hover > #two {
display:block;
left:0px;
height:100px;
}
There is a tutorial called Sexy Tooltips with Just CSS that might be exactly what you're looking for. There are two things to watch for:
This solution requires that your tooltip be in your HTML markup, instead of reading from the title attribute directly. In a semantic approach to HTML, this strikes me as the wrong approach. Using CSS3, it's possible to utilize the title attribute as the value of the content property for a psuedo-element. However, without using Javascript to cancel the default tooltip, both tooltips will appear (see this demo jsfiddle). A much lengthier discussion of this technique, its implementation and issues, can be found at CSS3 Only Tooltips and Stack Overflow: How to change the style of Title attribute inside the anchor tag?
If you are still providing support for older browsers, be aware the IE7 will not obey the :hover selector for anything but A tags. If you need the tooltips to appear in IE7 for any element but an A tag, you'll need to use Javascript to add/remove a class from the element on hover and style using that class.
<div id="one"><h3>hover over me</h3>
<div id="two">Hovered content</div>
</div>
#one {
background:#443322;
position:relative;
width:100px;
height:30px;
display:block;
color:#FFFFFF;
}
#two {
background:#223344;
position:absolute;
width:100px;
height:100px;
display:none;
color:#FFFFFF;
}
#one:hover #two {
display:block;
left:100px;
}
I have frame styles for the image:
.frame {
background:#efefef;
border:1px solid #f6f6f6;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); /* #todo Old Browsers Fix */
margin-bottom:15px;
padding:4px;
}
in one place of the project I work on, I have following HTML code:
<a href="#" class="preview">
<img class="frame" src="http://placehold.it/288x159" alt="" />
</a>
Basically, I want to change file opacity on mouseover and add a background (preview icon) to the link. I have following code:
.preview img.frame {
margin:0;
position:relative;
}
.preview:hover {
background:url('../img/icon_zoom.png') center center no-repeat;
display:inline-block;
z-index:40;
}
.preview img { /* #todo Add different browsers rules */
opacity: 1;
/*moz-transition-property:opacity;
-moz-transition-timing-function:ease-out;
-moz-transition-duration:500ms;*/
-moz-transition:opacity 1s ease-in-out;
}
.preview:hover img {
opacity:.5;
-moz-transition:opacity 1s ease-in-out;
/*-moz-transition-property:opacity;
-moz-transition-duration:500ms;
-moz-transition-timing-function:ease-out;*/
display:block;
position:relative;
z-index:-1;
}
However I faced few issues:
- how can I show background only for image body (currently it's also being displayed on the border)?
- why opacity is not being changed in Chrome?
jsFiddle added. As you may see, it works in FF, but not in Chrome.
The problem appears to be that you're changing the display to inline-block. Take it out, it should have the same functionality and work just fine.
Changing a couple other things seems to have it working as you intended. http://jsfiddle.net/minitech/v2vtw/2/