css label not behaving properly when clicked

Question

css label not behaving properly when clicked

Is it possible to reduce the label size when focused for text input and restore it when no text is entered or clicking elsewhere? Here is the code snippet I have been experimenting with:

div {
  height: 50px;
  width: 200px;
  border-bottom: 1px solid black;
  -webkit-transition: width 2s;
  transition: width 2s;
}
div:focus {
  background-color: transparent;
  width: 300px;
  tansition: ease;
  outline: 1px solid black;
}
label {
  font-size: 20px;
}

<div tabindex="0">
  <label>Three-colored border!</label>
</div>

Is there a way to achieve this effect using only CSS, or would JavaScript or AngularJS be required?

javascript html css angularjs

Answer 1

Answer №1

To adjust the font size within this div when selected, you can include

div:focus label { font-size: 14px; }

in your CSS code. This will cause the font size to decrease when the div is in focus.

div {
  height: 50px;
  width: 200px;
  border-bottom: 1px solid black;
  -webkit-transition: width 2s;
  transition: width 2s;
}
div:focus {
  background-color: transparent;
  width: 300px;
  transition: ease;
  outline: 1px solid black;
}
div:focus label {
  font-size: 14px;
  transition: font 1s ease
}
label {
  font-size: 20px;
  transition: font 1s ease
}

<div tabindex="0">
  <label>Three-colored border!</label>
</div>

Update: The font reduction now occurs as part of the transition effect with the div.

Answer 2

To adjust the font size within this div when selected, you can include

div:focus label { font-size: 14px; }

in your CSS code. This will cause the font size to decrease when the div is in focus.

div {
  height: 50px;
  width: 200px;
  border-bottom: 1px solid black;
  -webkit-transition: width 2s;
  transition: width 2s;
}
div:focus {
  background-color: transparent;
  width: 300px;
  transition: ease;
  outline: 1px solid black;
}
div:focus label {
  font-size: 14px;
  transition: font 1s ease
}
label {
  font-size: 20px;
  transition: font 1s ease
}

<div tabindex="0">
  <label>Three-colored border!</label>
</div>

Update: The font reduction now occurs as part of the transition effect with the div.

Answer 3

Answer №2

Styling elements using CSS is a common practice, but when it comes to detecting empty input fields, JavaScript is required as CSS cannot analyze the content of elements. To achieve this, you can use the following code snippet:

var size = $("input").text().length;

Include an onfocusout function in your HTML to check the size like so:

<label onfocusout="fn()">Three-colored border!</label>

Here's how to bring it all together:

function fn() {
    var size = $("label").text().length;
    if (size>0) {
        $("div").addClass("goodClass");
    } else {
        $("div").addClass("badClass");
    }
}

Keep in mind that the styles for "goodClass" and "badClass" should be defined in your CSS.

Answer 4

Styling elements using CSS is a common practice, but when it comes to detecting empty input fields, JavaScript is required as CSS cannot analyze the content of elements. To achieve this, you can use the following code snippet:

var size = $("input").text().length;

Include an onfocusout function in your HTML to check the size like so:

<label onfocusout="fn()">Three-colored border!</label>

Here's how to bring it all together:

function fn() {
    var size = $("label").text().length;
    if (size>0) {
        $("div").addClass("goodClass");
    } else {
        $("div").addClass("badClass");
    }
}

Keep in mind that the styles for "goodClass" and "badClass" should be defined in your CSS.

css label not behaving properly when clicked

Answer №1

Answer №2

Similar questions

Use checkboxes to switch specific divs on and off based on their two assigned classes

Navigating the itemlist HTML to extract and manipulate data in a Flask application

Leveraging Axios for form data submission

Adjusting the size of Bootstrap cards to ensure they are uniform in appearance

Error encountered: MongoDB failed to execute Javascript as it was unable to save a DBQuery object in the specified location within the collection.js file

Having issues with jQuery not functioning on this specific web page across all browsers. The reason behind this puzzling dilemma remains elusive to me

Tips for presenting JSON date in JavaScript using Google Chart

What is the method for notifying the latitude within this Google Maps javascript code?

Submitting with enter key on typeahead suggestions

Attempting to replace an AngularJS object with another service results in it being reinitialized upon using ctrl + f5 in the application

Unable to pass input data when ngIf is being used

PHP variables that are constantly changing

What is the best way to implement a delay before calling the owlCarousel function?

Popstate functionality not functioning correctly, requiring multiple consecutive clicks

Access the inner element with Selenium WebDriver in Java

CSS not working when attempting to override Angular (13) Material file

Once you have reviewed the initial reply, proceed to send a follow-up message

Displaying an iframe in full screen to adjust to different screen resolutions and portrait mode on tablets

Ajax function implemented successfully with stylish design

What is the most efficient way to calculate the total sum of all product amounts without using Jquery?