I struggle with generating a transition effect in the input box through label transformation

Question

I struggle with generating a transition effect in the input box through label transformation

Why is the input box not using the specified CSS styles for the input and label tags? The transform property doesn't seem to be working as expected. I've highlighted the areas where I'm facing issues with bold text, and I've included both my CSS and HTML code below.

Here's the code I tried:

.main {
    display: flex;
    flex-direction: column;
    height: 400px;
    width: 200px;
    margin: auto;
    border: 2px solid black;
    align-items: center;
    justify-content: center;
}

.searchdiv {
    position: relative;
    width: 100%;
    /* border: 2px solid red; */
}

.search {
    width: 100%;
    border: 0px;
    border-bottom: rgba(22, 22, 22, 0.349);
    background: rgba(211, 210, 210, 0.705);
}

label {
    position: absolute;
    top: 0%;
    left: 0%;
    transition: 0.3s ease;
}

.search:focus,
.search:valid {
    outline: none;
    background-color: rgba(85, 206, 247, 0.699);
}

#searchbar:focus~label,
#searchbar:valid~label {
    transform: translatey(-10px);
}

<div class="main">
    <div class="searchdiv">
        <input type="text" id="searchbar" class="search"><label for="searchbar">Search</label>
    </div>
    <div><button class="btn srchbtn">SEARCH</button></div>
</div>

javascript html css

Answer 1

Answer №1

I believe I have grasped your intentions correctly

Approach 1 - CSS

The adjustments are made in .search:focus and #searchbar:focus+label. However, once the input field loses focus, the text "Search" will revert to its original position.

If you prefer the change to occur only once, check out Approach 2 below

.main {
    display: flex;
    flex-direction: column;
    height: 400px;
    width: 200px;
    margin: auto;
    border: 2px solid black;
    align-items: center;
    justify-content: center;
}

.searchdiv {
    position: relative;
    width: 100%;
}

.search {
    width: 100%;
    border: 0px;
    border-bottom: rgba(22, 22, 22, 0.349);
    background: rgba(211, 210, 210, 0.705);
}

label {
    position: absolute;
    top: 0%;
    left: 0%;
    transition: 0.3s ease;
}

.search:focus {
    outline: none;
    background-color: rgba(85, 206, 247, 0.699);
}

#searchbar:focus + label {
    transform: translatey(-20px);
}

<div class="main">
    <div class="searchdiv">
        <input type="text" id="searchbar" class="search">
        <label for="searchbar">Search</label>
    </div>
    <div><button class="btn srchbtn">SEARCH</button></div>
</div>

Approach 2 - JS and CSS

If you desire the transition to occur just once upon clicking within the input element, JavaScript is required. This script will apply a style to the label element with the ID of searchbarLabel when the input element with the ID of searchbar is clicked.

document.getElementById("searchbar").addEventListener("click", function () {
    var y = document.getElementById("searchbarLabel");
    y.setAttribute('style', 'transform: translatey(-20px);')
});

.main {
    display: flex;
    flex-direction: column;
    height: 400px;
    width: 200px;
    margin: auto;
    border: 2px solid black;
    align-items: center;
    justify-content: center;
}

.searchdiv {
    position: relative;
    width: 100%;
}

.search {
    width: 100%;
    border: 0px;
    border-bottom: rgba(22, 22, 22, 0.349);
    background: rgba(211, 210, 210, 0.705);
}

label {
    position: absolute;
    top: 0%;
    left: 0%;
    transition: 0.3s ease;
}

.search:focus {
    outline: none;
    background-color: rgba(85, 206, 247, 0.699);
}

<div class="main">
    <div class="searchdiv">
        <input type="text" id="searchbar" class="search">
        <label for="searchbar" id="searchbarLabel">Search</label>
    </div>
    <div><button class="btn srchbtn">SEARCH</button></div>
</div>

Answer 2

I believe I have grasped your intentions correctly

Approach 1 - CSS

The adjustments are made in .search:focus and #searchbar:focus+label. However, once the input field loses focus, the text "Search" will revert to its original position.

If you prefer the change to occur only once, check out Approach 2 below

.main {
    display: flex;
    flex-direction: column;
    height: 400px;
    width: 200px;
    margin: auto;
    border: 2px solid black;
    align-items: center;
    justify-content: center;
}

.searchdiv {
    position: relative;
    width: 100%;
}

.search {
    width: 100%;
    border: 0px;
    border-bottom: rgba(22, 22, 22, 0.349);
    background: rgba(211, 210, 210, 0.705);
}

label {
    position: absolute;
    top: 0%;
    left: 0%;
    transition: 0.3s ease;
}

.search:focus {
    outline: none;
    background-color: rgba(85, 206, 247, 0.699);
}

#searchbar:focus + label {
    transform: translatey(-20px);
}

<div class="main">
    <div class="searchdiv">
        <input type="text" id="searchbar" class="search">
        <label for="searchbar">Search</label>
    </div>
    <div><button class="btn srchbtn">SEARCH</button></div>
</div>

Approach 2 - JS and CSS

If you desire the transition to occur just once upon clicking within the input element, JavaScript is required. This script will apply a style to the label element with the ID of searchbarLabel when the input element with the ID of searchbar is clicked.

document.getElementById("searchbar").addEventListener("click", function () {
    var y = document.getElementById("searchbarLabel");
    y.setAttribute('style', 'transform: translatey(-20px);')
});

.main {
    display: flex;
    flex-direction: column;
    height: 400px;
    width: 200px;
    margin: auto;
    border: 2px solid black;
    align-items: center;
    justify-content: center;
}

.searchdiv {
    position: relative;
    width: 100%;
}

.search {
    width: 100%;
    border: 0px;
    border-bottom: rgba(22, 22, 22, 0.349);
    background: rgba(211, 210, 210, 0.705);
}

label {
    position: absolute;
    top: 0%;
    left: 0%;
    transition: 0.3s ease;
}

.search:focus {
    outline: none;
    background-color: rgba(85, 206, 247, 0.699);
}

<div class="main">
    <div class="searchdiv">
        <input type="text" id="searchbar" class="search">
        <label for="searchbar" id="searchbarLabel">Search</label>
    </div>
    <div><button class="btn srchbtn">SEARCH</button></div>
</div>

Answer 3

Answer №2

Enhancing the code practice involves avoiding placing labels inside input fields and ensuring CSS specificity, such as:

.main .search-div input /* for clarification */

If you refine your code structure and quality, we may be able to offer more assistance in resolving issues.

Answer 4

Enhancing the code practice involves avoiding placing labels inside input fields and ensuring CSS specificity, such as:

.main .search-div input /* for clarification */

If you refine your code structure and quality, we may be able to offer more assistance in resolving issues.

Answer 5

Answer №3

From my perspective, it appears that the transformation is functioning correctly. If you suspect that the issue may be related to your browser settings, you can try incorporating a reset.css file similar to the one provided below:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Answer 6

From my perspective, it appears that the transformation is functioning correctly. If you suspect that the issue may be related to your browser settings, you can try incorporating a reset.css file similar to the one provided below:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

I struggle with generating a transition effect in the input box through label transformation

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble retrieving req.session variables in Express/NodeJS?

quickest method for accessing the selected radio button using jQuery

Search a database for a specific set of ObjectID using Mongoose

the absence of any content being shown when using v-else

Incorporating ContentPlaceHolder in ASP.NET MasterPage

When implementing multer in an express application, I encountered an issue where req.files appeared empty

Guide to refreshing the modal component with updated properties

Displaying content conditionally - reveal a div based on user selection

Is it possible to extract tooltip text from a website using Python and Selenium, specifically when the text is generated by JavaScript?

Is there a way for me to ensure that a response is only returned once a method call has been completed in

What is the best way to arrange an array of words expressing numerical values?

Is your PHP random advertisement feature malfunctioning?

It is not possible to import node_modules within an electron worker process

Revise: Anticipated output missing at conclusion of arrow function

Unusual Behavior in AngularJS: Using ng-include Triggers Full Page Reloading

an online platform design

To extract three records from storage and store them in the dbResult using a promise join technique

Ensure that the navigation menu is consistently displayed properly, without any of its contents extending beyond the

Assigning the "action" attribute of a form to direct to the homepage

I am unable to view the GridView features that have been set using jQuery in the JavaScript code on the webpage