Resolving the problem with highlighting borders

I am facing an issue with 2 inputs displayed side by side as shown below:

.centered-query-cn {
  height: 150px;
  display: flex;
}

.browse-query {
  display: flex;
}

.browse-query input {
  display: flex;
  flex-grow: 1 !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44262b2b30373036253404706a746a74">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92e2fde2e2f7e0bcf8e1d2a3bca3a0bcab">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32505d5d46414640534272061c021c02">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="centered-query-cn row">
  <div class="align-self-center">
    <div class="d-flex justify-content-center">
      <div class="col-10">
        <div class="browse-query">
          <input class="form-control form-control-lg" placeholder="term" type="text">
          <input class="form-control form-control-lg" placeholder="location" type="text">
        </div>
      </div>
    </div>
  </div>

Upon clicking the left-hand-side input, the border appears highlighted in a disorienting manner, shown here:

https://i.sstatic.net/ZQo9U.png

The right-hand-side input covers up the highlighted border. Is there any solution to rectify this issue?

csstwitter-bootstrapbootstrap-4

Answer №1

Adjust the position of the focused input to overlap with the unfocused field.

However, for accessibility purposes, interactive elements like inputs should be adequately spaced to enhance user experience (e.g. consider setting a gap for .browse-query). Additionally, make sure to include label elements for each field as placeholders alone may not be sufficient.

.centered-query-cn {
  height: calc(100vh - (334px + 6vh));
  min-height: 340px;
  margin: auto;
  display: flex;
}

.browse-query {
  display: flex;
}

.browse-query input {
  display: flex;
  flex-grow: 1 !important;
}

input:focus {
  position: relative;
  z-index: 1;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdafa2a2b9beb9bfacbd8df9e3fde3fd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a1a051a1a0f184400192a5b445b584453">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba6a6bdbabdbba8b989fde7f9e7f9">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="centered-query-cn row">
  <div class="align-self-center w-100">
    <div class="d-flex justify-content-center">
      <div class="col-10">
        <div class="browse-query">
          <input class="form-control form-control-lg" placeholder="term" type="text">
          <input class="form-control form-control-lg" placeholder="location" type="text">
        </div>
      </div>
    </div>
  </div>

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

Material UI causing animation to fail to trigger

After integrating material UI into my existing application, I encountered a peculiar issue. When adding material UI components to modals, the entering animation fails to trigger. Interestingly, downgrading material UI or removing all MUI components resolve ...

cssreactjsmaterial-ui

Is it possible to create a CSS code that targets specific browsers for a particular style to be applied?

My project has external CSS that contains all the styles for my site. The site looks great in Firefox, but it becomes a mess in Internet Explorer (as usual). Is there a way to write CSS so that specific styles only apply to certain browsers? For example, ...

htmlcssstylesheet

The main page's navbar dropdown menu fails to appear after a certain length

I've encountered a strange problem with my navbar. I utilized an online template, and the issue is that on the main page, the dropdown menu doesn't extend fully; it only goes as far as the length of the navigation bar (Refer to the image below). ...

javascripthtmlcssbootstrap-4

Styling specific to Nuxt.js layout with scoped css

Currently, I am using Nuxt and have a header layout for my navigation that has a white background color. However, on a specific page, I would like to change the navigation background color to be transparent (only for this page). I have attempted a few so ...

cssvue.jsnuxt.js

What distinguishes between using ul#test and #test ul in CSS?

Could someone help clarify the distinction between these two types of CSS declarations: ul#test { } #test ul { } Despite my searching, I am unable to pinpoint the difference, but they exhibit different behaviors when implemented on a test page. To me, i ...

csscss-selectors

Can CSS3 animations and @keyframes be utilized within a MailChimp template?

After coming across an inspiring HTML newsletter, I was motivated to add some keyframes animations to a MailChimp template. To my disappointment, the animation works perfectly on local setup, but once uploaded to MailChimp, the @keyframe rules along with t ...

cssanimationmailchimp

I am not getting any emails when users click on the "Pay Now" button

I am currently learning PHP and working on a website that integrates with the paytm gateway. I have a registration page with a "Pay Now" button, but when someone clicks on it, they are directed to pgRedirect.php (provided by paytm). I would like to recei ...

phphtmlcss

Issue with Bootstrap Code Rendering on Website

Recently, I have been honing my skills in Python and Django by following Corey Schafer's informative YouTube tutorial series. The main focus is on creating a blog page using these technologies. Click here to view the tutorial Things were progressing ...

javascriptcssdjangobootstrap-4django-templates

css - adjust flex box to cover half of the screen and increase its size

I'm having trouble getting my CSS Flex-box to stretch the full height of the right side of the screen from the center. I want it to cover the entire right half of the screen at full height. https://www.cajsoft.co.uk/test/visitor2.html Any help with m ...

htmlcss

My search bar in the navbar is sticky, but unfortunately it still ends up covering the page content as you scroll down

I am trying to figure out how to prevent the search bar (not the top navigation bar) from overlapping with the page contents when scrolling down. Just to clarify, I have both a navigation bar and a search bar, but the issue I'm addressing specifically ...

javascripthtmlcss

Adjust the size of a SVG group by hovering over a separate HTML element

I need some help with implementing a scale effect on group elements within an SVG. The goal is to have the group element scale up when hovering over a list item, but I am running into issues with the positioning because of the translate property. Does any ...

javascriptcsssvg

Splitting two distinct dropdown menus in Bootstrap 4: A step-by-step guide

I recently came across a helpful tutorial on Bootstrap 4 by W3Schools (https://www.w3schools.com/bootstrap4/bootstrap_button_groups.asp) and was curious about how dropdown menus function. <div class="btn-group"> <button type="button" class="b ...

htmlbootstrap-4

Aligning images in center of list

I'm in need of some CSS expertise to assist with this layout. Here is the current structure: <div class="movieList"> <div class="image" selected = true> <img class="poster" src="image1" selected = true/> </div> <d ...

htmlcssasp.net-mvc

My menu stretches out in a single line, and I prefer it not to collapse but instead continue on to the next line when it becomes smaller

Unfortunately, I'm facing this issue: I have a lengthy menu that is extending to the next line instead of collapsing, but it is not looking good. Here is the CSS code: .navigation li { display: inline; margin-top: 5px; } .navigation a:link ...

cssmenu

Having difficulty modifying the styling of a paragraph within a div container

I have been working on a function that is supposed to adjust the font-size and text-align properties of a paragraph located within a div tag once a button is pressed. function customizeText() { document.getElementById('centretext').innerHTML = ...

javascriptcssfonts

Transitioning the CSS transform on a dynamic button title in a React component when the state changes

I have incorporated a unique Button Component in my React project that transforms on hover using a scale value. I am utilizing this button twice. The first instance contains only dynamic content without an onClick property: <Button className={`${classe ...

cssreactjsmobile-safari

Display and conceal individual divs using jQuery

Despite my lack of experience with jQuery, I am struggling with even the simplest tasks. The goal is to display/hide specific messages when certain icons are clicked. Here is the HTML code: <div class="container"> <div class="r ...

javascripthtmljquerycssjquery-events

Issue with jquery .click function not triggering after CSS adjustment

In the process of creating a fun game where two players take turns drawing on a grid by clicking <td> elements. Currently, I have implemented the functionality to toggle the background color of a <td> element from black to white and vice versa ...

javascriptjquerycssajax

I am unable to retrieve images using the querySelector method

Trying to target all images using JavaScript, here is the code: HTML : <div class="container"> <img src="Coca.jpg" class="imgg"> <img src="Water.jpg" class="imgg"> <img src="Tree.jpg" class="imgg"> <img src="Alien.jpg" class=" ...

javascripthtmlcssdomcss-selectors

Issue with DIV element wrongly breaking on iPhone Safari and Chrome - fix verified

I am currently working on a basic web application, but I'm facing an issue that's proving to be quite puzzling. When viewed on Desktop Chrome with the display set to iPhone 12 Pro (although I have a 13 Pro), everything looks perfectly aligned in ...

htmlcssangulargoogle-chromemobile-safari