Visibility of the button changes based on the focus of the inputs

I am faced with a scenario where I have the following DOM structure:

<input type='text'>
<button>Add</button>

and this CSS styling:

button {
    visibility: hidden;
}

input:focus + button {
    visibility: visible;
}

In this setup, the button is only visible when the input element is focused. I have attached a click listener to the button, however, it does not seem to work as expected.

Upon further investigation, I discovered that adding a transition property to the button resolves the issue. Unfortunately, transitions are supported on IE10 and above.

button {
    transition: visibility 1s ease;
}

My question now is: Is there an alternative CSS approach to achieve this behavior without relying on JavaScript's focus and blur events?

javascripthtmlcssfocusvisibility

Answer №1

Instead of using visibility, you can opt for opacity. This will ensure that the click event on the button is triggered.

button {
    opacity:0;
}

input:focus + button {
    opacity:1;
}
<input type='text'>
<button onclick="alert('Hello')">Add</button>

Answer №2

One alternative solution involves utilizing the hover property and incorporating visibility: visible

This approach will allow you to activate the button by hovering over it with your mouse. However, please note that the cursor must be positioned on the input field beforehand.

   

 button {
    visibility: hidden;
}
    button:hover{
visibility: visible;
}
    input:focus + button {
    visibility: visible;
}
<input type='text'>
<button onclick="alert('Hello')">Add</button>

I trust this information proves helpful for you

Answer №3

One issue you may have encountered is that the button disappears immediately after clicking because the input loses focus. To address this, consider incorporating a transition-delay and including a button:focus class in your CSS code:

input:focus + button,
button:focus {
    visibility: visible;
}

button {
    transition: visibility 0s ease 50ms;
}

By implementing this code, the button will remain visible for an extra 50 milliseconds after the input loses focus, giving you more time to click on it. Additionally, the button will not disappear when focused, thanks to the added CSS condition.

While this solution may not be perfect, it offers a workaround without relying on JavaScript.

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

Utilizing the power of jQuery's $.each method to dynamically generate HTML select options within an AJAX

I am working with a bootstrap modal that includes a form which requires data from the database. To retrieve this data, I am using PHP as shown below: public function get_view_for_inspection_report_belum_eor(){ $q = $this->inspection->get_view_fo ...

javascriptphpjqueryajax

Discovering a specific element using jQuery

I am trying to work with a div structure like this: <div class="country"> <div class="cty_popover"> <p>TITLE</p> <ul> <li>NAME 1</li> <li>NAME 2</li> ...

javascriptjqueryfind

What might be preventing me from achieving a full-length page using height 100% or height 100vh?

I am currently working on a web application that has a similar layout to Slack. I am facing an issue where the page doesn't take up the full width and height as intended. The problem seems to be that it sometimes only occupies half of the screen while ...

htmlcss

Protractor end-to-end tests: extracting chosen menu item from page model function

My website has a navigation menu with different items. I'm using a page model for end-to-end tests. In one of my test specs, I need to call a function from the page model that does the following: Check that only one item in the menu has a specific ...

javascriptangulartypescriptprotractor

The size of the website elements needs to be increased for better visibility on mobile devices

While developing the official website for my Discord bot - Idle Baker, I opted to utilize Bootstrap 5 for its user-friendly design features, making it easier than dealing with extensive CSS coding. After completing the homepage of the site, I encountered ...

htmlcssmobile-websitebootstrap-5

Developing Action To Execute Node.js within an HTML File

Just starting off with Node.js So I've set up a server using node.js and have the following files: Server.js Client.js Index.html The server is all good to go. But within the HTML file, I want to include a link or action to execute client.js Norm ...

htmlnode.js

Pressing the button twice is necessary for troubleshooting when initially opened

After creating a code snippet that hides or shows part of the text when a button is clicked, I noticed that upon launching the page, it requires two clicks on the button to function properly. This issue occurs only during the initial launch, as after the f ...

javascriptjqueryhtmlcss

How can I pass a specific value, rather than the entire array, in a ReactJS dropdown menu?

I am facing a problem where the entire array is being passed as an argument when I call onchange after getting correct values in the dropdown. Instead of only receiving the selected value, e contains the whole array. Here is the code snippet that demonst ...

javascripthtmlreactjsdropdown

Deleting an item from an array using Vue.js

1. How can I remove a link using the method from a Vue.js component? Please help me troubleshoot this error: 'method splice is undefined' is showing up in console. Adding a link when inserting a message is not an issue, but removing it seems impo ...

javascriptarraysvue.js

Steps to update the color of checkbox labels

I'm struggling with changing the colors of checkbox values based on their status - when checked, I want the text to display in green, and when unchecked, I want it to be red. Below is a sample input type, but I can't figure out how to style the t ...

javascriptvue.jsvuejs2

Proper Sequence of Bootstrap Header Configuration

I'm working on creating a header/navbar using bootstrap, but I'm unsure about the correct order and method to achieve this. This is how I want it to look: And when collapsed: Should everything be contained within the NAV tag? I have a header ...

htmltwitter-bootstrap-3navbar

Modify the c3 axis labels using CSS

I've been using the c3 package in R, which serves as a wrapper for the C3 javascript charting library created by Masayuki Tanaka. One issue I encountered is that my c3 chart was cutting off the last date on the x-axis. After inspecting it in Chrome I ...

cssrc3.js

Exploring the depths of a JSON structure using jQuery

This is my first time working with JSON data and I need some guidance on a specific issue. When using .getJSON on a local file, the structure appears neat like this: https://i.sstatic.net/7CYPC.jpg I can easily retrieve the value I want (CustRep) with c ...

javascriptjqueryarraysjson

Move a div horizontally by 100% using translateX, then bring it back into view by a specific number of pixels

I am currently working on creating a custom push navigation system and I am using translateX to shift the content over to reveal the navigation menu. However, I am facing an issue where I don't want the content to be completely pushed off screen, but ...

jqueryhtmlcsstransform

Having trouble with button functionality following the implementation of jquery.min.js?

We have implemented the code below, following the suggestion from this source, to replace text with icons. However, after applying the code, especially the Jquery.min.js file, the "add to cart" button on this page is no longer functioning. <script src= ...

javascriptjquery

Why won't the hamburger menu spin around like it's supposed to?

After struggling for four days, I'm having trouble getting this menu to work properly. Any help would be greatly appreciated. When I try clicking on the hamburger menu, it doesn't rotate or do anything at all. The most puzzling part is... On m ...

htmlcssresponsive-designrotationhamburger-menu

Designing a navigational sidebar featuring clickable links to specific locations on Google Maps

I'm currently utilizing a map script created by Derek Ender that integrates with Google Fusion Tables to display locations on a map. While the script is functioning well, I have received a request to make the sidebar list of locations clickable. The ...

javascripthtmlcssgoogle-maps

A guide on extracting data from a JSON string and populating a list in JavaScript

Is there a way for me to extract the "Toppings" values from my JSON string and display them as list items? I appreciate any assistance you can provide! <html> <body> <section> <h2>Toppings</h2> <ul> <li>JSO ...

javascriptjson

Toggle debug functionality on the fly

Currently in the process of developing a JavaScript animation library of significant size, I am contemplating adding debugging code to it. A simple check like this could be implemented: if(myLib.debugger){ console.warn('warning message'); } ...

javascriptajaxdebuggingdynamic

What is the technique for adding a stroke to an SVG border?

I am in the process of creating a gauge component using SVG. I'm using two strokes to show two states simultaneously. Currently, my output looks like this: enter image description here enter image description here However, I would like it to look li ...

htmlcsssvgstrokegauge