Is there a way to change the border property of an element when clicked, without causing the displacement of other elements?

Question

Is there a way to change the border property of an element when clicked, without causing the displacement of other elements?

I'm in the process of creating a webpage where users can choose the color and storage capacity of an item. Only one color/capacity can be selected at a time, and once chosen, it should be highlighted with a border.

The issue I encountered is that when applying the border, it displaces other elements on the page, as shown below:

https://i.stack.imgur.com/tsJqY.png

My initial thought was to give all elements a border: 2px solid rgba(0,0,0,0) to prevent displacement and then use JavaScript to modify the border properties upon selection. However, I believe this approach may not be the most elegant solution.

Below is the HTML code...

<ul>
    <li onclick="changeName('Gold')"><div class="select-color" id="gold"></div></li>
    <li onclick="changeName('Silver')"><div class="select-color" id="silver"></div></li>
    <li onclick="changeName('Space Grey'); "><div class="select-color" id="space-grey"></div></li>
</ul>

and the CSS code...

ul li {
          width: 47px;
          height: 47px;
          border-radius: 12px;
          border: 2px solid rgba(0,0,0,0);
          padding: 3px;
       }

.select-color {
          width: 45px;
          height: 45px;
          border-radius: 8px;
          border: 1px solid #c2bebb;
          -webkit-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
          -moz-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
          box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
        }

#gold {
          background-color: #f5e7dc;
      }

#silver {
          background-color: #e2e2e2;
        }

#space-grey {
          background-color: #232323;
            }

If anyone has suggestions on a better way to handle this situation, I would greatly appreciate it. Thank you!

javascript html css position border

Answer 1

Answer №1

To ensure that the width and height of the elements include the border and radius, add box-sizing: border-box to the ul li selector:

ul li {
      width: 47px;
      height: 47px;
      border-radius: 12px;
      border: 2px solid rgba(0,0,0,0);
      padding: 3px;
      box-sizing: border-box;
   }

The use of box-sizing: border-box ensures the total dimensions of the element take into account the border and radius.

Edit:

For further information, here are two links for documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 2

To ensure that the width and height of the elements include the border and radius, add box-sizing: border-box to the ul li selector:

ul li {
      width: 47px;
      height: 47px;
      border-radius: 12px;
      border: 2px solid rgba(0,0,0,0);
      padding: 3px;
      box-sizing: border-box;
   }

The use of box-sizing: border-box ensures the total dimensions of the element take into account the border and radius.

Edit:

For further information, here are two links for documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 3

Answer №2

Utilizing only CSS, this solution involves using radio buttons and labels to achieve the desired effect. Give it a try!

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  padding-top: 30px;
}

label {
  color: transparent;
  position: absolute;
  top: 0;
  left: 0;
}

input:checked+label {
  color: black;
}

input[type="radio"] {
  display: none;
}

#gold+label:after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: gold;
  position: absolute;
  border-radius: 5px;
  top: 30px;
  left: 0;
}

#gold:checked+label:after, #silver:checked+label:after, #bronze:checked+label:after {
  border: 2px solid red;
}

#silver+label:after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: silver;
  position:
   absolute;
  border-radius: 5px;
  top: 30px;
  left: 40px;
}

#bronze+label:after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: sandybrown;
  position: absolute;
  border-radius: 5px;
  top: 30px;
  left: 80px;
}

<div class="container colors">
  <form name="colors">
    <input type="radio" id="gold" name="color" />
    <label for="gold">Gold</label>
    <input type="radio" id="silver" name="color" />
    <label for="silver">Silver</label>
    <input type="radio" id="bronze" name="color" />
    <label for="bronze">Bronze</label>
  </form>
</div>

Answer 4

Utilizing only CSS, this solution involves using radio buttons and labels to achieve the desired effect. Give it a try!

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  padding-top: 30px;
}

label {
  color: transparent;
  position: absolute;
  top: 0;
  left: 0;
}

input:checked+label {
  color: black;
}

input[type="radio"] {
  display: none;
}

#gold+label:after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: gold;
  position: absolute;
  border-radius: 5px;
  top: 30px;
  left: 0;
}

#gold:checked+label:after, #silver:checked+label:after, #bronze:checked+label:after {
  border: 2px solid red;
}

#silver+label:after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: silver;
  position:
   absolute;
  border-radius: 5px;
  top: 30px;
  left: 40px;
}

#bronze+label:after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: sandybrown;
  position: absolute;
  border-radius: 5px;
  top: 30px;
  left: 80px;
}

<div class="container colors">
  <form name="colors">
    <input type="radio" id="gold" name="color" />
    <label for="gold">Gold</label>
    <input type="radio" id="silver" name="color" />
    <label for="silver">Silver</label>
    <input type="radio" id="bronze" name="color" />
    <label for="bronze">Bronze</label>
  </form>
</div>

Answer 5

Answer №3

Implement box-sizing: border-box; For additional information, refer to the following MDN link https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 6

Implement box-sizing: border-box; For additional information, refer to the following MDN link https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 7

Answer №4

To maintain the border-color as transparent when the div is not chosen, and modify the border color upon selection. Additionally, consider incorporating a transition effect for added visual appeal.

Answer 8

To maintain the border-color as transparent when the div is not chosen, and modify the border color upon selection. Additionally, consider incorporating a transition effect for added visual appeal.

Answer 9

Answer №5

<style>
        input[type="checkbox"]:checked  ~ #hello{
            box-shadow: 0 0 0 3px hotpink;
        }
        #hello{
            width: 50px;
            margin: 20px;
        }
</style>

<input id="check" type="checkbox">
<label id="hello" for="check">Hello</label>

This code snippet demonstrates how a hidden checkbox can be implemented using CSS and HTML.

Answer 10

<style>
        input[type="checkbox"]:checked  ~ #hello{
            box-shadow: 0 0 0 3px hotpink;
        }
        #hello{
            width: 50px;
            margin: 20px;
        }
</style>

<input id="check" type="checkbox">
<label id="hello" for="check">Hello</label>

This code snippet demonstrates how a hidden checkbox can be implemented using CSS and HTML.

Is there a way to change the border property of an element when clicked, without causing the displacement of other elements?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The issue with res.sendFile is that it is failing to display

Importing GeoJSON data into Meteor's Leaflet

Looking for a dynamic solution to retrieve over 100 data products in Angular JS? Let's explore methods to efficiently call a large volume of

Obtain the JSON object by provided criteria

Compile a list of URLs found within a particular HTML A tag and save them to a text file

Ensure that the divs are properly aligned and construct columns within a single column

Incorporating VueJS with a sleek material design aesthetic

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

The Highchart formatter function is being called twice on each occasion

Stopping PHP execution when an Ajax request is aborted

Looking to construct dynamic checkboxes in Angular by parsing a JSON object retrieved through AJAX

The setInterval function will run just one time when triggered by an onclick event

The parameter '{ validator: any; }' cannot be assigned to the ValidatorFn type in this context

Step-by-step guide on using JQuery to listen to an event and dynamically add a p element after a button, with the feature to remove it on click

Gather information that is dynamic upon the selection of a "li" option using Python Selenium

TS1086: Attempting to declare an accessor within an ambient context is not allowed

Encountering a Node.js issue when attempting to properly sanitize data before inserting it into MySQL

Having trouble creating a report with an HTML screenshot using Protractor

Increasing the font size on a document

In search of advice on the best web-based database management technology