How do I stop the label element from interfering with the corners of my search bar from rounding

Question

How do I stop the label element from interfering with the corners of my search bar from rounding

Issue

I am experiencing an issue with the appearance of my search bar when using a label element. The corners on the left-hand side are not rounded, and the alignment of the search button is off.

When I remove the label element, the search bar looks perfect. However, I want to adhere to best coding practices.

How can I achieve the desired look of my search bar while still utilizing the label element?

Troubleshooting Steps

I have attempted to use CSS to style the bar without success.
I have also tried nesting the input, button, and span elements inside the label element but encountered issues.

Code Example

JSFiddle Link

html css bootstrap-4

Answer 1

Answer №1

It seems like bootstrap is targeting class names based on whether they are the first or last child.

.input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child)

and

.input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child)

These styles seem to be in the _border-radius.scss file. I am not entirely sure of the reason behind this, but it appears that these styles are necessary to add borders. Essentially, an element will only receive border-radius if it is the first element within its group.

To demonstrate:


  <input class="form-control" id="search-bar" placeholder="This bar has rounded corners only on the right side." />
<label for="search-bar" class="sr-only"></label>

Answer 2

It seems like bootstrap is targeting class names based on whether they are the first or last child.

.input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child)

and

.input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child)

These styles seem to be in the _border-radius.scss file. I am not entirely sure of the reason behind this, but it appears that these styles are necessary to add borders. Essentially, an element will only receive border-radius if it is the first element within its group.

To demonstrate:


  <input class="form-control" id="search-bar" placeholder="This bar has rounded corners only on the right side." />
<label for="search-bar" class="sr-only"></label>

Answer 3

Answer №2

To achieve a rounded left corner effect, implement the following CSS code:

#search-box{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

Answer 4

To achieve a rounded left corner effect, implement the following CSS code:

#search-box{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

How do I stop the label element from interfering with the corners of my search bar from rounding

Issue

Troubleshooting Steps

Code Example

Answer №1

Answer №2

Similar questions

"Seeking guidance on getting my carousel functionality up and running in Angular 8 - any

What is the correct way to apply styles universally instead of using "*" as a selector?

Configure the input to accept integer values

What steps can be taken to avoid the table row from getting hidden behind the table header?

The card-group is off-center within the column

What is the process for clicking a button in Selenium Python that lacks a "select" tag and only becomes clickable after fulfilling certain conditions?

What is the best way to trigger a function once another one has finished executing?

React Issue: Footer not staying attached at the bottom of the page

What type of modelfield in django can store the duration of a video playback? Alternatively, how can a TimeField be used without an

Angular, dividing a row between two components

A sticky sidebar in HTML that is confined to a specific div element

Adjusting variables in Bootstrap using the app.scss file is a helpful customization technique for

Formatting a pair of elements side by side in MUI Select

Is it possible to assign a class or id to a dynamically inserted link using JavaScript?

Arrangement with mutual prime numbers and rowspan

Tips for incorporating a variable into an action link for HTML and Flask

The initial item in the Materializecss slider is failing to display

Transferring an image file from PHP to JavaScript

Text not aligned with Line Height

Ways to align the contents of a div in the center