When I click away from the screen, the bottom border of the button disappears

Question

When I click away from the screen, the bottom border of the button disappears

Here is the HTML code snippet I am working with:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<button>
    <i class="fa fa-5x fa-motorcycle gobumpr_icon"></i>
</button>
<button>
    <i class="fa fa-car fa-5x gobumpr_icon"></i>
</button>

This is the CSS code I am using:

button:focus {
    border-bottom: thick solid #FFA800;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: width 2s;
    -webkit-transition: width 2s;
    outline: none;
    box-shadow: none;
}

I am trying to figure out how to make the border bottom stay until another button is clicked. Any suggestions on how to achieve this?

html css font-awesome

Answer 1

Answer №1

:focus won't work in this case because the border will be removed when you click outside. To achieve this, you'll need to add a class on button click that remains unless another button on the same page is clicked.

$(function() {
   var buttons = $('.button');
  
   buttons.click(function(e) {
     e.preventDefault();

     buttons.removeClass('focus');
     $(this).addClass('focus');
  });
});

.button.focus {
  border-bottom:thick solid #FFA800;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: width 2s;
  -webkit-transition: width 2s;
  outline:none;
  box-shadow:none;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<button class="button"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></button>

<button class="button"><i class="fa fa-car fa-5x gobumpr_icon"></i></button>

Answer 2

:focus won't work in this case because the border will be removed when you click outside. To achieve this, you'll need to add a class on button click that remains unless another button on the same page is clicked.

$(function() {
   var buttons = $('.button');
  
   buttons.click(function(e) {
     e.preventDefault();

     buttons.removeClass('focus');
     $(this).addClass('focus');
  });
});

.button.focus {
  border-bottom:thick solid #FFA800;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: width 2s;
  -webkit-transition: width 2s;
  outline:none;
  box-shadow:none;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<button class="button"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></button>

<button class="button"><i class="fa fa-car fa-5x gobumpr_icon"></i></button>

Answer 3

Answer №2

If you prefer, you can achieve this effect without the need for javascript:

input:checked + i{
border-bottom:thick solid #FFA800;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
transition: width 2s;
    -webkit-transition: width 2s;
outline:none;
box-shadow:none;
}

input{
  display:none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<label><input type="radio" name="test"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></label>

<label><input type="radio"name="test"><i class="fa fa-car fa-5x gobumpr_icon"></i></label>

Answer 4

If you prefer, you can achieve this effect without the need for javascript:

input:checked + i{
border-bottom:thick solid #FFA800;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
transition: width 2s;
    -webkit-transition: width 2s;
outline:none;
box-shadow:none;
}

input{
  display:none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<label><input type="radio" name="test"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></label>

<label><input type="radio"name="test"><i class="fa fa-car fa-5x gobumpr_icon"></i></label>

Answer 5

Answer №3

In order to accomplish this, add a specific class to the button you click on while removing that class from any other buttons. Give this code a try:

$('button').click(function() {
    $('button').not(this).removeClass('active');
    $(this).toggleClass('active');
})

button.active {
    border-bottom: thick solid #FFA800;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: width 2s;
    -webkit-transition: width 2s;
    outline: none;
    box-shadow: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<button><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></button>
<button><i class="fa fa-car fa-5x gobumpr_icon"></i></button>

Answer 6

In order to accomplish this, add a specific class to the button you click on while removing that class from any other buttons. Give this code a try:

$('button').click(function() {
    $('button').not(this).removeClass('active');
    $(this).toggleClass('active');
})

button.active {
    border-bottom: thick solid #FFA800;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: width 2s;
    -webkit-transition: width 2s;
    outline: none;
    box-shadow: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<button><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></button>
<button><i class="fa fa-car fa-5x gobumpr_icon"></i></button>

Answer 7

Answer №4

The reason behind this issue is that the applied CSS will only take effect when the element loses focus, which occurs when you click anywhere else.

To resolve this, you can add or remove a different class.

When you click on a button, apply a separate class to the element.

.borderBottom
{
  border-bottom:thick solid #FFA800;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: width 2s;
  -webkit-transition: width 2s;
  outline:none;
  box-shadow:none;    
}

When clicking on another button, remove the class if it's already present.

For more information, see add class in JavaScript.

Answer 8

The reason behind this issue is that the applied CSS will only take effect when the element loses focus, which occurs when you click anywhere else.

To resolve this, you can add or remove a different class.

When you click on a button, apply a separate class to the element.

.borderBottom
{
  border-bottom:thick solid #FFA800;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: width 2s;
  -webkit-transition: width 2s;
  outline:none;
  box-shadow:none;    
}

When clicking on another button, remove the class if it's already present.

For more information, see add class in JavaScript.

Answer 9

Answer №5

Applying css to button:focus means that the css will be active as long as the button is focused, but once you click anywhere on the screen, the focus will disappear.

To add a .active class when a button is clicked and apply css to it:

$('button').click(function() {
    $('button').removeClass('active');
    $(this).addClass('active');
})

button.active {
  border-bottom:thick solid #FFA800;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: width 2s;
  -webkit-transition: width 2s;
  outline:none;
  box-shadow:none;    
}

Answer 10

Applying css to button:focus means that the css will be active as long as the button is focused, but once you click anywhere on the screen, the focus will disappear.

To add a .active class when a button is clicked and apply css to it:

$('button').click(function() {
    $('button').removeClass('active');
    $(this).addClass('active');
})

button.active {
  border-bottom:thick solid #FFA800;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: width 2s;
  -webkit-transition: width 2s;
  outline:none;
  box-shadow:none;    
}

When I click away from the screen, the bottom border of the button disappears

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

use two separate keys for grouping in JavaScript

Learn how to create a responsive flickr embedded video with Bootstrap!

Why does the select element display the first item when it is bound to a model?

The single controller can now showcase various notification styles for operations such as insertion, updating, or error handling

Exploring the art of CSS box-shadow and playing with margins

Don't forget to update the CSS stylesheet whenever templates are rendered in Flask

Having trouble getting custom tabs in jQuery to function properly?

Best practice for sending intricate variables to JavaScript via HTML

What makes @font-face function on Safari but not on Firefox in Mac versions?

"Experimenting with KinectJS: Adding Rotation to a Pair of Images

problem with selection of date and month in dropdown list with jquery

I have tried implementing "display:inline-block" but my DIV stubbornly refuses to stay on the same line

Split-button dropdowns within tabs implemented with Bootstrap

Troubleshooting Bootstrap 4: hidden-md-up inconsistency

Guide to configuring capybara-webkit for testing ajax requests and capturing screenshots containing HTML with loaded CSS and JavaScript

Ionic Framework: Eliminating the tiny 1px vertical scroll glitch for single-line content

Css flex is not compatible with Safari, iPhone 5, and some mobile web browsers' webviews

MEAN stack application that has an input field with a dynamic attribute which saves as undefined

Ensure that the label control is aligned to the left within the <div> element

Javascript error specific to Internet Explorer. Can't retrieve the value of the property 'childNodes'