Set focus to textinput after transition ended - javascript

Is there a way to set the focus - so that typing automatically goes into the text input field - after a transition ended? I want then the user types the keyboard inputto go automatically go into the textinput field. If possible, can one do it with CSS only? Or is JavaScript (no jQuery!) needed?
Something like
document.getElementByClassName('text-input').focus();
doesn't do it.
<div class="wrapper">
<div class="element"></div>
<input class="text-input" type="text" name="search" />
</div>
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input {
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
Here is a codepen
https://codepen.io/anon/pen/MqjmQz

I see other solutions, it's better to use transitionend event listener. Just adding one more way to do so. Please have a look.
JS:
var txtInput = document.querySelector('.text-input');
txtInput.addEventListener("transitionend", function(e){
document.getElementById('inputField').focus();
}, false)
https://codepen.io/anon/pen/MqjmQz

Here you go. Pure JS Solution
document.getElementById("wrapper").onmouseover = function()
{
setTimeout(function(){mouseOver()},600)
};
function mouseOver(){
document.getElementById('inputField').focus();
}
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input {
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
<div class="wrapper" id="wrapper">
<div class="element"></div>
<input class="text-input" id="inputField" type="text" name="search" />
</div>
Edit
You can also call a mouseout function so that whenever the cursor goes out, the field get blur.
document.getElementById("wrapper").onmouseover = function()
{
setTimeout(function(){mouseOver()},600)
};
document.getElementById("wrapper").onmouseleave = function()
{
mouseOut()
};
function mouseOver(){
document.getElementById('inputField').focus();
}
function mouseOut(){
document.getElementById('inputField').blur();
}
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input {
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
<div class="wrapper" id="wrapper">
<div class="element"></div>
<input class="text-input" id="inputField" type="text" name="search" />
</div>

There's no such feature I fear, but as you know how long the transition take (0.6s) you can use a setTimeout.
var wrapper = document.querySelector('.wrapper');
wrapper.addEventListener('mouseover', function() {
setTimeout(function() {
wrapper.classList.add('focus');
document.querySelector('.text-input').focus();
}, 600)
});
Then you need some CSS changes to prevent shrink when mouse goes out.
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover,
.wrapper.focus {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input,
.wrapper.focus .text-input{
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
https://codepen.io/lucafbb/pen/Eegmrx?editors=1111

Related

How to fix parent div unfocusing when clicking child button while parent div is focussed

I have a portfolio website with some of my projects showcased on there and I'm trying to make a button in the project page that returns the user to the portfolio page when clicked. My only problem is that the parent div element loses focus when I try to click the child button instead of directing the user to the portfolio page. How do I make the parent div stop losing focus on child button click?
I've tried focussing the button element in javascript but that didn't seem to make a difference.
document.getElementById('portfoliobackarrowwrapper').onclick = function () {
document.getElementById('portfoliobackcontainer').focus();
document.getElementById('portfoliobackarrow').focus();
};
div.portfoliobackcontainer {
position: fixed;
width: 120px;
height: 60px;
background-color: white;
z-index: 2;
margin-left: -130px;
margin-top: 50px;
border: 1px solid rgb(185, 185, 185);
display: block;
animation: portfoliobackanim .0001s linear;
}
button.portfoliobackbutton {
background-color: orange;
border: 1px solid rgb(214, 139, 0);
border-radius: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
color: white;
font-family: 'Inter', sans-serif;
font-size: medium;
margin-left: 10px;
margin-top: 7.5px;
}
button.portfoliobackbutton:hover {
border: 1px solid rgb(255, 166, 0);
background-color: rgb(255, 184, 53);
color:white;
transition: all .25s linear;
cursor: pointer;
}
div.portfoliobackarrowwrapper {
border: 1px solid rgb(185, 185, 185);
width: 35px;
height: 60px;
margin-left: 120px;
margin-top: -51px;
background-color: white;
}
div.portfoliobackarrow {
background: none;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
width: 20px;
height: 20px;
transform: rotate(315deg);
border-radius: 2px;
transition: .05s linear;
margin-top: 17.5px;
animation: portfolioarrowrotate 0.0001s linear;
}
div.portfoliobackarrowwrapper:hover {
cursor: pointer;
}
div.portfoliobackarrowwrapper:hover div.portfoliobackarrow{
border-bottom: 3px solid orange;
border-right: 3px solid orange;
transition: all .1s linear;
}
div.portfoliobackcontainer:focus {
animation-fill-mode: forwards
}
div.portfoliobackcontainer:focus div.portfoliobackarrow{
animation-fill-mode: forwards;
}
#keyframes portfoliobackanim {
to{
margin-left: 0px;
}
}
#keyframes portfolioarrowrotate {
to {
transform: rotate(135deg);
margin-left: 10px;
}
}
<div tabindex="-1" class="portfoliobackcontainer" id="portfoliobackcontainer">
<button class="portfoliobackbutton" onclick="window.location='../index.html';">Portfolio</button>
<div tabindex="-1" class="portfoliobackarrowwrapper" id="portfoliobackarrowwrapper">
<div class="portfoliobackarrow" id="portfoliobackarrow"></div>
</div>
</div>
Beside the problem you have, your code needs to be re-written, maybe not now but in the future once you get more experience.
Let me give you some tips on improving your code:
You can't focus 2 elements, or the previous one loses focus.
When you redirect to another page use anchor tag a and button for other interactions.
Instead of focusing the element, why not give it a class for that specific task.
Try to improve your classes to work without tag names like div.class to .class only. This may break your styles now but take it as advice.
Adopt BEM naming system for classes, it looks soo messy.
So for now, use this solution:
Replace JavaScript code with this:
const backArrowElement = document.getElementById('portfoliobackcontainer')
const backArrowFocusedClass = 'portfoliobackcontainerfocused'
// Toggle `focused` class.
backArrowElement.addEventListener('click', function() {
if (this.classList.contains(backArrowFocusedClass)) {
this.classList.remove(backArrowFocusedClass)
} else {
this.classList.add(backArrowFocusedClass)
}
})
And in CSS file replace class div.portfoliobackcontainer:focus with div.portfoliobackcontainerfocused
See the full code here:
const backArrowElement = document.getElementById('portfoliobackcontainer')
const backArrowFocusedClass = 'portfoliobackcontainerfocused'
// Toggle `focused` class.
backArrowElement.addEventListener('click', function() {
if (this.classList.contains(backArrowFocusedClass)) {
this.classList.remove(backArrowFocusedClass)
} else {
this.classList.add(backArrowFocusedClass)
}
})
div.portfoliobackcontainer {
position: fixed;
width: 120px;
height: 60px;
background-color: white;
z-index: 2;
margin-left: -130px;
margin-top: 50px;
border: 1px solid rgb(185, 185, 185);
display: block;
animation: portfoliobackanim .0001s linear;
}
button.portfoliobackbutton {
display: inline-block;
background-color: orange;
border: 1px solid rgb(214, 139, 0);
border-radius: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
color: white;
font-family: 'Inter', sans-serif;
font-size: medium;
margin-left: 10px;
margin-top: 7.5px;
}
button.portfoliobackbutton:hover {
border: 1px solid rgb(255, 166, 0);
background-color: rgb(255, 184, 53);
color:white;
transition: all .25s linear;
cursor: pointer;
}
div.portfoliobackarrowwrapper {
border: 1px solid rgb(185, 185, 185);
width: 35px;
height: 60px;
margin-left: 120px;
margin-top: -51px;
background-color: white;
}
div.portfoliobackarrow {
background: none;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
width: 20px;
height: 20px;
transform: rotate(315deg);
border-radius: 2px;
transition: .05s linear;
margin-top: 17.5px;
animation: portfolioarrowrotate 0.0001s linear;
}
div.portfoliobackarrowwrapper:hover {
cursor: pointer;
}
div.portfoliobackarrowwrapper:hover div.portfoliobackarrow{
border-bottom: 3px solid orange;
border-right: 3px solid orange;
transition: all .1s linear;
}
div.portfoliobackcontainerfocused {
animation-fill-mode: forwards
}
div.portfoliobackcontainerfocused div.portfoliobackarrow{
animation-fill-mode: forwards;
}
#keyframes portfoliobackanim {
to{
margin-left: 0px;
}
}
#keyframes portfolioarrowrotate {
to {
transform: rotate(135deg);
margin-left: 10px;
}
}
<div tabindex="-1" class="portfoliobackcontainer" id="portfoliobackcontainer">
<button class="portfoliobackbutton" onclick="window.location='../index.html';">Portfolio</button>
<div tabindex="-1" class="portfoliobackarrowwrapper" id="portfoliobackarrowwrapper">
<div class="portfoliobackarrow" id="portfoliobackarrow"></div>
</div>
</div>

Button with hidden input

I want to create a button with a hidden input that activates once the button was pressed.
I made demo but in this demo input animated via changing width and padding which is not good.
So is there any better way to animate this button?
HTML:
<div class="button-wrap">
<label>Max score</label>
<input>
</div>
CSS:
.button-wrap {
display: flex;
height: var(--height);
outline: none;
--height: 20px;
--padding: 5px;
--background: #454555;
--background-active: #46467c;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 30px;
--text-color: #eee;
}
input, label {
height: auto;
transition: .3s;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: inline;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
}
input {
padding: var(--padding) 0;
border: none;
width: 0;
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background-active);
padding: var(--padding);
}
Attribute 'active' is added by js after the button was pressed.
And there is the demo:
function myFunction(e) {
e.toggleAttribute("active").toggle;
}
.button-wrap {
display: flex;
outline: none;
--height: 20px;
--padding: 5px;
--background: #47478d;
--background-active: #46464f;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 40px;
--text-color: #eee;
width: 250px;
height: 40px;
background:#34344d;
padding:15px;
}
input, label {
height: auto;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: flex;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
align-items:center;
justify-content:center;
}
input {
padding: var(--padding);
border: none;
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
overflow: hidden;
display: none;
opacity: 0;
transition: display 0ms 400ms, opacity 400ms 0ms;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
background-color: var(--background-active);
padding: var(--padding);
color:#fff;
opacity: 1;
display:block;
transition: display 0ms 0ms, opacity 600ms 0ms;
}
<div class="button-wrap" onclick="myFunction(this)">
<label>Max score</label>
<input type="text" value="100">
</div>
So there's the answer that my teacher came up with.
HTML
<div class='button-wrap'>
<label>Max count</label>
<input>
</div>
CSS
.button-wrap {
width: 200px;
contain: content;
overflow: hidden;
border-radius: 5px;
position: relative;
outline: none;
height: 30px;
line-height: 20px;
background: #454555;
--input-width: 32px;
}
.button-wrap[active] {
background-color: #46467c;
}
.button-wrap:hover {
background-color: #46467c;
}
input, label {
height: 100%;
display: block;
box-sizing: border-box;
transition: transform .3s;
appearance: none;
outline: 0;
color: #eee;
border: none;
text-align: center;
background: transparent;
padding: 5px;
}
label {
width: 100%;
user-select: none;
}
input {
position: absolute;
top: 0;
right: 0;
border-left: 2px solid #565666;
width: var(--input-width);
transform: translateX(var(--input-width));
}
.button-wrap[active] label {
transform: translateX(calc(-1 * var(--input-width) / 2));
}
.button-wrap[active] input {
transform: translateX(0);
}
Here's the demo

Netflix-like hover effect with buttons [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
How do I create a hover effect as shown in the gif? All I could do now is zoom it on hover. How do I add the buttons and other details too, on hover?
I've done this so far:
.Row_poster:hover {
transform: scale(1.3);
overflow: visible;
cursor: pointer;
z-index: 98;
}
Pure CSS Methods
Although the effect can be obtained using JavaScript, here are some pure CSS methods.
Method 1: Use ::after and ::before.
Read:
::after on MDN
::before on MDN
body,
html {
height: 100%;
width: 100%;
background: #141414;
margin: 0;
padding: 25px;
box-sizing: border-box;
font-family: Lato, 'Segoe UI', Roboto, sans-serif;
}
.square {
background-size: cover!important;
background-position: center!important;
display: inline-block;
width: 150px;
height: 100px;
transition: transform 100ms ease-out, border-radius 200ms ease-out;
}
.square:hover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
border-radius: 10px 10px 0 0;
transform: scale(1.5);
box-shadow: 0 0 2px #000a;
}
.square::after {
position: relative;
top: 100px;
display: block;
background: #18181818;
box-shadow: 0 0 2px #000a;
color: #fff;
width: 150px;
height: fit-content;
padding: 5px;
box-sizing: border-box;
opacity: 0;
border-radius: 0 0 10px 10px;
transition: opacity 300ms ease-out, border-radius 200ms ease-out;
}
.square:hover::after {
opacity: 1;
}
.square.one {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one:hover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one::after {
content: 'Never Gonna Give You Up!';
}
<div class="square one"></div>
You should prefer using this method if your caption-thing is not very customized.
Method 2: Use separate elements
This method is best no matter how customized is your caption-thing.
body,
html {
height: 100%;
width: 100%;
background: #111;
margin: 0;
padding: 25px;
box-sizing: border-box;
font-family: Lato, 'Segoe UI', Roboto, sans-serif;
}
.square {
width: 150px;
height: 100px;
transition: transform 100ms ease-out, border-radius 200ms ease-out;
}
.square .cover {
width: 100%;
height: 100px;
border-radius: 10px 10px 0 0;
background-size: cover!important;
background-position: center!important;
}
.square .text {
display: none;
background: #181818;
color: #fff;
width: 100%;
height: fit-content;
padding: 5px;
box-sizing: border-box;
transition: opacity 300ms ease-out, border-radius 200ms ease-out;
border-radius: 0 0 10px 10px;
}
.square:hover {
border-radius: 10px;
transform: scale(1.5);
box-shadow: 0 0 2px #000a;
}
.square:hover .text {
display: block;
}
.square.one .cover {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one:hover .cover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
<div class="square one">
<div class="cover"></div>
<div class="text">
Never Gonna Give You Up!
</div>
</div>
The Result
Use Method 2. This looks very similar to the gif.
body,
html {
height: 100%;
width: 100%;
background: #141414;
margin: 0;
padding: 25px;
box-sizing: border-box;
font-family: 'Segoe UI', Roboto, sans-serif;
}
.square {
width: 150px;
height: 100px;
transition: transform 100ms ease-out, border-radius 200ms ease-out;
}
.square .cover {
width: 100%;
height: 100px;
border-radius: 10px 10px 0 0;
background-size: cover!important;
background-position: center!important;
}
.square .text {
display: none;
background: #181818;
color: #fff;
width: 100%;
height: fit-content;
padding: 5px;
box-sizing: border-box;
transition: opacity 300ms ease-out, border-radius 200ms ease-out;
border-radius: 0 0 10px 10px;
}
.square:hover {
border-radius: 10px;
transform: scale(1.5);
box-shadow: 0 0 2px #000a;
}
.square:hover .text {
display: block;
}
.square.one .cover {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one:hover .cover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square .text .info {
font-size: 8px;
}
.icons {
display: flex;
align-items: center;
justify-content: space-between;
}
.icons :nth-child(3) {
margin-left: auto;
}
.icons span{
border-radius: 50%;
border: 1px solid #777;
width: 18px;
height: 18px;
margin-right: 2px;
font-size: 12px;
text-align: center;
line-height: 18px;
font-weight: 1000;
overflow: hidden;
}
.rating {
border: 0.1px solid white;
padding: 1px 2px;
}
.match {
color: green;
font-weight: bold;
}
<div class="square one">
<div class="cover"></div>
<div class="text">
<div class="icons">
<span>:)</span>
<span>O</span>
<span>V</span>
</div>
<div class="info">
<span class="match">98% Match</span>
<span class="rating">18+</span>
<span class="seasons">5 Seasons</span>
</div>
</div>
</div>
Hi Harsh,
Please have a look at the below code I put together to see if this is what you are trying to achieve, pal.
$(document).ready(function () {
$(document).on('mouseenter', '.transformar', function () {
$(this).find(".playButtons").show('slow');
}).on('mouseleave', '.transformar', function () {
$(this).find(".playButtons").hide();
});
});
.transformar {
display:block;
height:150px;
transition: transform 2s;
}
.playButtons{display: none}
.transformar:hover{
transform: scale(2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='transformar' align="center">
<img src="https://i.pinimg.com/originals/e1/d0/1b/e1d01b1b7f602d223afc747fcbced364.jpg" height="150" alt="Netflix Example">
<h2>Filme do Netflix</h2>
<div id="#botones" class="playButtons">
<button type="button">PLAY EPISODE</button>
</div>
</div>

Issue with CSS Text box rendering in IE

I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.
Screenshots attached below.
Image in IE
Image in Chrome
Any help would be highly appreciated.
Code for the search box and the search text button:
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
}
/*
.search-box:hover ~ .category-box {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box:hover {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box {
position: absolute;
align-items: center;
top: 38%;
left: 50%;
text-decoration-color: white;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
width: 0px;
color: white;
visibility: collapse;
opacity: 0;
transition: width 1s, height 1s, transform 1s;
transition: opacity 1s;
}
*/
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
color: red;
}
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>
Can you set 400px in .search-box class should be work
Try to add the height property for the .search-text, code as below:
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
height:58px;
}
The output as below:

Make <input /> appear on transitioning <div>

I have this setup:
.wrapper {
height: 40px;
width: 80px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
justify-content: center;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 800px;
-webkit-transition: width 0.4s ease-in-out;
justify-content: left;
padding-left: 35px;
}
.text-input {
display: none;
}
.wrapper:hover .text-input {
display: block;
}
<div>
<div class=wrapper>
<div class=element>
<input class=text-input type="text" name="search" />
</div>
</div>
</div>
https://codepen.io/anon/pen/BOzJxL
I need the the textinput to appear next to the hotpink div elemenet (it needs to stay where it is when the input appears). I need it to appear bit-by-bit - sort of being revealed pixel by piyxel. When leaving the div, I want it to be hidden again - same style as it came in.
This will work for you.
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input {
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
<div class="wrapper">
<div class="element"></div>
<input class="text-input" type="text" name="search" />
</div>

Categories