We Keep Coding

SweetAlert Icon overflow-y

I have an issue modifying my website. When I call Swal.fire(...), something like this happens:
Icon on the picture overflows and not renders properly(seems like scrollbar affects on icon render). How can I fix this? Thanks
Here is my custom css code:
* {
margin: 0px;
padding: 0px;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
color: white;
user-select: none;
font-size: 20px;
}
h1 {
font-size: 60px;
}
body {
z-index: -2;
background-color: black;
}
#canvas1 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
background: black;
}
.header {
text-align: center;
height: 100vh;
}
.header-title {
font-size: 70px;
font-weight: bold;
margin-top: 40vh;
}
section {
padding: 20vh;
}
.section-title {
font-size: 60px;
}
.section-text {
font-size: 25px;
}
footer {
height: 30vh;
background-color: rgb(24, 24, 24);
}
.navbar {
font-size: 40px;
position: fixed;
list-style-type: none;
overflow: hidden;
}
.navbar > li {
float: left;
}
.navbar > li a {
transition: .3s;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar > li a:hover {
background-color: rgba(255, 255, 255, 0.671);
}
input {
background-color: black;
margin: 20px;
}
.account-creator {
margin: auto;
width: 50%;
border: 3px solid white;
padding: 10px;
border-radius: 10px;
margin-top: 30vh;
padding: 10vh;
}
.account-creator {
margin-bottom: 100px;
}
.small-title {
font-size: 40px;
}
button {
background-color: black;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 35px;
overflow-y: hidden;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
top: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #f3214f;
}
input:focus + .slider {
box-shadow: 0 0 1px #f3214f;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.input_description{
font-size: 30px;
}
.simple-button {
background-color: #f3214f;
padding: 10px;
border-radius: 5px;
border: none;
transition: .4s;
margin: 30px;
}
.simple-button:hover {
transform: scale(1.2);
box-shadow: 0px 0px 10px #f3214faf;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background-image: linear-gradient(45deg, rgb(255, 115, 0) 0%, rgb(255, 0, 0) 100%);
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background-color: white;
background-image: none;
border-radius: 20px;
}
.clauses-field{
border: 3px solid white;
border-radius: 10px;
max-height: 300px;
position: absolute;
overflow-y: scroll;
margin-left: 40vw;
padding: 30px;
}
Idk maybe this code ruins everything, but it will be good if I don't need to change anything in here cause my website could just crash

For some resone you icon is overflowing so that orange line is scrollbar
add .sa-icon.sa-success { overflow:hidden }
this code in your css . if this dosent work , just inspect success icon and copy its class and add overflow:hidden to that.
if you still cant do it just copy popup code and add to your question , i will give you working code.

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:

How to make mobile responsive vertical range slider

I have done a range slider position into vertical. but it's not responsive. I'm checked in chrome default mobile devices. when adjusting the range slider it will scroll the page
I have added my code here.
.slido{
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
-webkit-transform: rotate(90deg);
}
.slido::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<input type="range" class="slido" min="1" max="100" step="1">

Using just transform on an element does not affect the size or position of its parent or of any other elements, at all. There is absolutely no way to change this fact of how transform works. so adding the div on parent level (which can handle the overflow of rotation) is one solution.
code Updated:
.slido {
-webkit-appearance: none;
width: 100vh;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
transform: rotate(90deg);
}
.slido::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.rotation-wrapper-outer {
display: table;
}
.rotation-wrapper-inner {
padding: 50% 0;
height: 0;
}
.element-to-rotate {
display: block;
transform-origin: top left;
/* Note: for a CLOCKWISE rotation, use the commented-out
transform instead of this one. */
transform: rotate(-90deg) translate(-100%);
/* transform: rotate(90deg) translate(0, -100%); */
margin-top: -50%;
/* Not vital, but possibly a good idea if the element you're rotating contains
text and you want a single long vertical line of text and the pre-rotation
width of your element is small enough that the text wraps: */
white-space: nowrap;
}
<div id="container">
<div class="rotation-wrapper-outer">
<div class="rotation-wrapper-inner">
<input type="range" class="slido" min="1" max="100" step="1">
</div>
</div>
</div>

You have transform the horizontal slider in to vertical which won't work so you can use vertical slider only check snippet.
let app = (() => {
function updateSlider(element) {
if (element) {
let parent = element.parentElement,
lastValue = parent.getAttribute('data-slider-value');
if (lastValue === element.value) {
return; // No value change, no need to update then
}
parent.setAttribute('data-slider-value', element.value);
let $thumb = parent.querySelector('.range-slider__thumb'),
$bar = parent.querySelector('.range-slider__bar'),
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
$thumb.style.bottom = `${pct}%`;
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight/2}px)`;
$thumb.textContent = `${element.value}%`;
}
}
return {
updateSlider: updateSlider
};
})();
(function initAndSetupTheSliders() {
const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
inputs.forEach(input => input.setAttribute('value', '50'));
inputs.forEach(input => app.updateSlider(input));
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background: #3D3D4A;
color: white;
font-family: sans-serif;
}
.info {
position: absolute;
top: 0;
left: 0;
padding: 10px;
opacity: 0.5;
}
.container {
position: relative;
display: inline-block;
padding-top: 40px;
}
.range-slider {
display: inline-block;
width: 40px;
position: relative;
text-align: center;
max-height: 100%;
}
.range-slider:before {
position: absolute;
top: -2em;
left: 0.5em;
content: attr(data-slider-value) '%';
color: white;
font-size: 90%;
}
.range-slider__thumb {
position: absolute;
left: 5px;
width: 30px;
height: 30px;
line-height: 30px;
background: white;
color: #777;
font-size: 50%;
box-shadow: 0 0 0 4px #3D3D4A;
border-radius: 50%;
pointer-events: none;
}
.range-slider__bar {
left: 16px;
bottom: 0;
position: absolute;
background: linear-gradient(dodgerblue, blue);
pointer-events: none;
width: 8px;
border-radius: 10px;
}
.range-slider input[type=range][orient=vertical] {
position: relative;
margin: 0;
height: calc(100vh - 50px);
width: 100%;
display: inline-block;
position: relative;
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track,
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-moz-range-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-ms-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
color: transparent;
height: 100%;
}
.range-slider input[type=range][orient=vertical]::-ms-fill-lower,
.range-slider input[type=range][orient=vertical]::-ms-fill-upper,
.range-slider input[type=range][orient=vertical]::-ms-tooltip {
display: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-ms-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="range-slider">
<input type="range" orient="vertical" min="0" max="100" />
<div class="range-slider__bar"></div>
<div class="range-slider__thumb"></div>
</div>
</div>

Set focus to textinput after transition ended

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