Fixing border highlight issue

Hooman Bahreini 0
Viewed 26

I have 2 inputs 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/bootstrap@4.0.0/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/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/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>

When I click on the LHS input, the border gets highlighted, but it does not look right, as shown below:

enter image description here

The RHS input hides the highlighted border. Is there anyway I can fix this?

bootstrap-4 twitter-bootstrap css
2 Answers

Set a relative position for the focused input, so it overlaps the unfocused field.

Anyway for accessibility reasons, actionable elements like inputs should be spaced far enough to make the interface clearer (e.g. you could set a gap for .browse-query). Also label elements for the fields should be provided (placeholders are not enough effective).

.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/bootstrap@4.0.0/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/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/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>

Fabrizio Calderan0

It cause because your RHS covers LHS input. You should move RHS to the right a little.

And if you don't want to move it, you must use z-index property.

Jacob Roberto0
Related