How can I make this div stay active after the click?
I tried looking it up but saw nothing that applied to textarea transitions
CSS:
.comment-box:active {
/* Settings for Transition */
height:100px;
/* Transition: Basic */
transition-duration:0.8s;
transition-timing-function:ease;
/* Transition: Chrome+Safari */
-webkit-transition-duration:0.8s;
-webkit-transition-timing-function:ease;
/* Transition: Mozilla */
-moz-transition-duration:0.8s;
-moz-transition-timing-function:ease;
/* Transition: Opera */
-o-transition-duration:0.8s;
-o-transition-timing-function:ease;
}
HTML:
<textarea type="text" validation="required" name="comment" placeholder="type a comment here..." maxlength="500" class="comment-box"></textarea>
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've tried a few different things and I can't seem to figure out how to change the opacity of the placeholder without the opacity for the text input to be included.
Here is the code:
<label for="CI_company-organization-input" class="col-lg-10 col-form-label" style="margin-top: 5px;" required>Company/Organization</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="CI_company-organization-input" placeholder="Ex: GreyBar">
</div>
I want to make the opacity of the placeholder to be 0.5 but make the text input to be normal opacity. I've tried placing a style tag after the placeholder attribute but all that does it make the opacity of the input text also 0.5 opacity.
Is this possible?
You maybe want to try this and le t me know if it works?
input.form-control::placeholder {
opacity: .5;
}
Here is a possible solution with some fallbacks
https://codepen.io/gurgen/full/Kemeyv
<label for="CI_company-organization-input" class="col-lg-10 col-form-label" style="margin-top: 5px;" required>Company/Organization</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="CI_company-organization-input" placeholder="Ex: GreyBar">
</div>
Here is the CSS
input.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: .5; /* Firefox */
}
input.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .5;
}
input.form-control::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .5;
}
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 created a div that when hovering, reveals a form. the problem is each time im moving the cursor the transition takes place and filling the form become impossible. how can i make the transition work once and than stay/ last for long time?
*i found some information about the delay option but i didn't find a way to modify the delay time separately for the first hovering and then for when the cursor moves out of the div (when "unhovering"). im looking for a pure css sulotion
HTML:
<form id="women">
<label >
<input type="text" name="fullName" >
</label>
</form>
<div id="wcover"></div>
css:
#wcover{
right: 177px;
z-index: 1;
top: 291px;
position: absolute;
width: 337px;
height: 402px;
background: yellow;
-webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
}
#wcover: hover{
height: 0px;
background:black;
}
Assuming your div is before the form, you may use a transition (e.g. of the opacity property) with a long delay on "unhover"
e.g.
Markup(*)
<div id="wcover">hover me</div>
<form id="women">
<label >whats your name</label>
<input type="text" name="fullName">
</form>
Css
form {
opacity: 0;
transition: opacity 1s 999999s;
}
div:hover + form {
opacity: 1;
transition: opacity 0s;
}
After the hover event, thanks to the delay inserted, the user may takes up to 999.999 seconds (approx.ly 277.7 hours) to fill the form.
Live Example: http://codepen.io/anon/pen/dPYOLB
(*)As a side note, for a matter of markup validation, you can't insert an heading into a label.
You properly need some jQuery here....
$("#wcover").hover(function() {
$("#wcover").addClass("hovered");
});
And some CSS:
.hovered { //Properties here }
Alternatively, you could make use of a checkbox to show/hide your div on click. It is not very clear from your question as to whether you are showing the form which is shown in your code, or the div itself which contains another form.
Am assuming, that you have a form inside the div.
#wcover {
opacity: 0;
transition: all 1s;
}
label[for=chk] { cursor: pointer; }
#chk { display: none; }
#chk:checked + #wcover { opacity: 1; }
<label>
What's your name?
<input type="text" id="fullName" />
</label>
<br /><br />
<label for="chk">Click to Show/Hide Complete Form</label>
<input id="chk" type="checkbox" />
<div id="wcover">
<form id="women">
<h2>Complete Form</h2>
<input type="text" /><br/>
<input type="text" /><br/>
</form>
</div>
Could you not wrap it all in a containing div and apply the hover to that?
<div id="form-container">
<form id="women">
<label >
<input type="text" name="fullName" >
</label>
</form>
<div id="wcover"></div>
</div>
Hi Use CSS transitionn delay property
#wcover{
right: 177px;
z-index: 1;
top: 291px;
position: absolute;
width: 337px;
height: 402px;
background: yellow;
-webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
transition-delay: 1s;
}
#wcover: hover{
height: 0px;
background:black;
transition-delay: 0s;
}
The above css will give delay after the mouse out. just reverce it to do it other way
I would like to use the CSS3 scale() transition for a rollover effect, but I'd like to keep the rollover image dimensions the same. So, the effect is that the image zooms in, but it remains constrained to its existing width and height.
img:hover {
transform:scale(1.5);
-ms-transform:scale(1.5); /* IE 9 */
-moz-transform:scale(1.5); /* Firefox */
-webkit-transform:scale(1.5); /* Safari and Chrome */
-o-transform:scale(1.5); /* Opera */
}
Here's a basic fiddle to begin with.
But again, I want the image to keep the width/height.
I'm not married to using the css3 scale. Maybe there's a better way by resizing the element.
You could achieve that simply by wrapping the image by a <div> and adding overflow: hidden to that element:
<div class="img-wrapper">
<img src="..." />
</div>
.img-wrapper {
display: inline-block; /* change the default display type to inline-block */
overflow: hidden; /* hide the overflow */
}
WORKING DEMO.
Also it's worth noting that <img> element (like the other inline elements) sits on its baseline by default. And there would be a 4~5px gap at the bottom of the image.
That vertical gap belongs to the reserved space of descenders like: g j p q y. You could fix the alignment issue by adding vertical-align property to the image with a value other than baseline.
Additionally for a better user experience, you could add transition to the images.
Thus we'll end up with the following:
.img-wrapper img {
transition: all .2s ease;
vertical-align: middle;
}
UPDATED DEMO.
.img-wrapper {
display: inline-block;
overflow: hidden;
border: 1px solid gray;
}
.img-wrapper img {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
vertical-align: middle;
}
.img-wrapper img:hover {
-webkit-transform:scale(1.5); /* Safari and Chrome */
-moz-transform:scale(1.5); /* Firefox */
-ms-transform:scale(1.5); /* IE 9 */
-o-transform:scale(1.5); /* Opera */
transform:scale(1.5);
}
<div class="img-wrapper">
<img src="http://ts2.mm.bing.net/th?id=HN.608017620862175177&pid=15.1&H=160%20&W=80" />
</div>