Why doesn't the visibility or display change when focused?

I came up with a unique idea for a search feature where clicking a "button" would reveal and expand the input box. Instead of using a hidden checkbox, I decided to experiment with using a label because clicking the label could focus on the connected element. While setting focus and basic transformations worked, I encountered difficulty in hiding/showing the textbox using CSS properties like visibility: hidden/visible or display: none/inline-block. Using just opacity wasn't sufficient since the textbox could still be interacted with even when not visible.

You can check out my current attempt here: JsFiddle

I'm struggling to understand why this approach isn't working as expected. Can anyone provide some insight into what I might be doing wrong?

htmlcss

Answer №1

When elements are hidden from view, they are unable to receive focus, meaning that the :focus pseudo-class will not be applicable.

It appears that utilizing properties such as width and opacity can result in a satisfactory visual effect.

Answer №2

In my opinion, using opacity is the only way to allow focus on an element. Using visibility:hidden or display:none; may not work since the elements are not visible.

form label {
    font-size: 23px;
}

#box {
    width: 0px;
    opacity: 0;
    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -ms-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;        
}

#box:focus {
    opacity: 1;
    width: 50px;
}

Check out this demo on jsfiddle

Answer №3

It's impossible to receive focus from a label because it is not an element that can be focused on. Check out BoltClocks' solution in this post: Is there a way for a label to react to the :focus CSS pseudo-class?

Answer №4

Check out the fiddle here: http://jsfiddle.net/h6NNs/

Swap out the CSS selector from :focus to :hover.

The revised CSS code should look like this:

form label {
    font-size: 23px;
}

#box {
    width: 0px;
    visibility: hidden;
    opacity: 0;

    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -ms-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;        
}

#box:hover{
    visibility: visible;
    opacity: 1;    
    width: 50px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the value not to display in my range slider thumb tooltip?

In a recent project of mine, I implemented a range slider with two thumbs - one for setting the minimum value and one for the maximum value. The goal was to provide users with a visual representation of the range they are selecting by displaying the thumb ...

javascripthtmlrangesliderbootstrap-5

Is it possible to adjust the position/target values of a webkit CSS transition without interrupting its operation

Is there a way to smoothly change the target position or attributes of a running transition without halting it? To illustrate, let's consider this initial animation: -webkit-transition:-webkit-transform 5s ease-in-out -webkit-transform: translate3d( ...

javascripthtmlcsswebkit

Revolving mechanism within React.js

I am currently developing a lottery application using React.js that features a spinning wheel in SVG format. Users can spin the wheel and it smoothly stops at a random position generated by my application. https://i.stack.imgur.com/I7oFb.png To use the w ...

javascriptcssreactjs

Learn how to incorporate an image into your Codepen project using Dropbox and Javascript, along with a step-by-step guide on having the picture's name announced when shown on the screen

Hey there, I'm in need of some assistance. I have a Codepen page where I am working on displaying 4 random shapes (Square, Triangle, Circle, and Cross) one at a time, with the computer speaking the name of each shape when clicked. I want to pull these ...

javascripthtmlimagedropboxcodepen

When adding a border radius to an iframe, you'll notice delicate curved lines appearing on all four corners

I have implemented material UI's CardMedia component to display an Iframe with a embedded youtube link. To achieve rounded corners for the iframe, I set the border-radius to 30px. Although it successfully rounds the corners, it also introduces thin li ...

cssmaterial-uilinethinborder-radius

adding <script> elements directly before </body> tag produces unexpected results

While following a tutorial, the instructor recommended adding <script> tags right before the </body> to enhance user experience. This way, the script will run after the entire page content is loaded. After implementing the code block as sugges ...

javascripthtmldom

Guide to placing a button on the same line as text with the use of JavaScript

Does anyone know how to add a button to the right of text that was added using JS DOM? I've tried multiple techniques but can't seem to get it right - the button always ends up on the next line. Any tips on how to achieve this? var text = docu ...

javascripthtmldombuttonalignment

The spacing in a nested flexbox form gets distorted due to CSS3 styling

Working on creating a flexbox form where labels and inputs are on the same line. Have successfully achieved the desired layout using flex properties like flex-basis. However, encountered an issue when trying to nest the flexbox within an element with a fi ...

htmlformscssflexbox

What are some methods for controlling a webpage? Is it through HTML, JavaScript, Xpath, or

Hey there, I could really use your expertise on untangling a question that has me completely stumped. What exactly is the mechanism for controlling a webpage? a. HTML b. JavaScript c. Xpath d. CSS ...

javascriptseleniumhtml

Tips on ensuring a <video> element occupies the full height and width of the screen

I am currently working on an Angular 6 project where I am live streaming a user's webcam to an HTML element. My goal is to simulate the experience of capturing a video or photo on a mobile device. However, the size of the video is currently small. I ...

htmlcssangularvideogetusermedia

What is the best way to load content into Bootstrap tabs?

I would like to incorporate a loading spinner within the bootstrap tabs. When a user clicks on a tab pane link, a loading spinner will be displayed for a few seconds before showing the actual tab content. HTML : <ul class="nav nav-tabs" id=&q ...

javascripthtmljquerycssbootstrap-5

What is the best way to store items in localStorage within Angular version 4.4.6?

I have been working on implementing a basic authentication system in Angular 4.4 with MongoDB as the backend database. login.component.ts import { Component, OnInit } from '@angular/core'; import { AuthService } from 'app/services/auth.ser ...

javascripthtmlangular

Preventing the collapse of the right column in a 2-column layout with Bootstrap 3

I've recently begun exploring Bootstrap and am attempting to achieve the following: (Left column - larger) Heading Heading 2 Heading Image Heading Image Heading Address (Right column - smaller) Heading Paragraph List items My issue ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Populate the combobox located within the Freemarker template

My goal is to populate a combobox with data that is stored in a List<ArrayList<String>> named column. This is the code snippet I am using to load data onto the template: List<ArrayList<String>> columna = con.getColumn("table", "co ...

javahtmlcomboboxfreemarker

What is the process for configuring my form to automatically send to my email upon clicking the send button?

I found this code snippet on a website and I'm trying to figure out how to make the 'Send!' button redirect users to my email address with their message, name, and email included. Can anyone help me solve this issue? I attempted to add my e ...

javascripthtmlcss

When using IE6, images may momentarily appear stretched when set to height:auto

I have set the height to auto, however I am observing that small thumbnail images are being momentarily stretched vertically in Internet Explorer 6 before adjusting to their correct height. It is worth mentioning that the image tag in the HTML appears as ...

htmlcssimageinternet-explorer-6

creating a new page upon clicking a div element

I need assistance in creating an effect similar to the one found on this website - where clicking on a div opens a new page. ...

jqueryhtmljquery-uidom

Abandoned <li> and </li> elements

I've come across some HTML code where orphaned <li> and </li> tags are surrounding certain paragraphs without any corresponding opening or closing <ul> or <ol> tags. Is there a way to efficiently parse or mass find/replace ove ...

htmlregexreplacehtml-listsorphan

Retrieve JSON data from the text area

How to retrieve a JSON file from a textarea and identify the location of errors in the code causing issues with reading the JSON? $(document).ready(function(){ $('textarea').change(function(){ var fa=[ $('textarea').val() ]; ...

javascriptjqueryhtmljson

What is the correct way to maintain focus on a nested scrolling div over another scrolling div with jQuery?

I have encountered an issue with a modal view that contains content extending beyond its boundaries. To remedy this, I applied the overflow-y: scroll property. However, the problem arises when the modal view overlaps with the body, which also has scrolling ...

jqueryhtmlcssscroll