Home > Back-end >  In CSS how to eliminate animation jerkiness and unwanted space created by elements with relative pos
In CSS how to eliminate animation jerkiness and unwanted space created by elements with relative pos

Time：11-01

I've got this "search-box" with several input fields. I'm trying to add a 2nd placeholder element to get that text transformation effect when clicking the search fields e. g. <span >Insert banana number:</span>. These 2nd additional placeholders created 2 unwanted changes:

  1. A trembling/jerkiness in the animation after the search field is clicked to start typing, particularly the 1st search field.

  2. An unwanted space between each search field. In the example below I have removed the 2nd place holder of the 2nd search field to see the difference:
    the space between "apples" and "peach" is ok, but between "bananas" and "apples" is not.

I need a way to:

  1. Remove the jerkiness from the animation.
  2. Remove the unwanted space created by the 2nd placeholder text.

My guess is that the issue is probably the fact that the positioning of the placeholders is set as position: relative;. I tried several workarounds/tricks but I cannot get rid of these 2 issues, without messing up the position/size etc. of the search fields and "SEARCH" buttons.

Is there a way to fix this or some workaround?

Example is below:
(also in case you prefer here: https://jsfiddle.net/jqzzy/ztnp0275/19/ )

///////////////////////// - BODY LOAD FIX - ///////////////////////////////

window.addEventListener("load", () => {
  document.querySelector("body").classList.add("body_onload");
});

////////////////////////// - ANIMATE ITEMS ON LOAD - ////////////////////////

var items = document.getElementsByClassName("fade-item");
for (let i = 0; i < items.length;   i) {
  fadeIn(items[i], i * 50)
}

function fadeIn(item, delay) {
  setTimeout(() => {
    item.classList.add('fadein')
  }, delay)
}
body {
  background-color: rgb(26, 26, 26);
  color: rgb(204, 204, 204);
  width: 290px;
  height: 300px;
  border: solid 1px rgb(78, 78, 78);
  border-radius: 5px;
  padding: 10px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
}


/* ////////////////// ANIMATION ITEMS onl oad //////////////// */

.fade-item {
  transition: 0.2s ease-in-out;
  opacity: 0;
}

.fadein {
  animation-name: fadeIn;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  100% {
    opacity: 1;
    transform: scale(1.0);
  }
}


/* ////////////////// STRUCTURE //////////////////// */

table.unstyledTable thead th {
  font-weight: normal;
}

.special-text {
  color: red;
}

.askit {
  color: red;
  font-size: 18px;
  padding: 2px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
}

.title {
  color: rgb(231, 231, 231);
  font-size: 16px;
  padding: 3px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
}

.sections {
  color: rgb(168, 168, 168);
  font-size: 14px;
  padding: 2px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
}

.footing {
  color: rgb(155, 155, 155);
  position: absolute;
  right: 15px;
  bottom: 10px;
  font-size: 10px;
  padding: 2px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

@media screen and (max-width: 800px) {
  .topnav a,
  .topnav input[type=text],
  .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 200px;
    margin: 0px;
  }
  .topnav input[type=text] {
    border: 1px solid rgb(102, 102, 102);
    font-size: 16px;
  }
}


/*////// BUTTON ///////*/

.form-submit-button {
  background: #464646;
  color: rgb(172, 172, 172);
  border-style: solid;
  height: 39px;
  width: 60px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 14px;
  border: 0px solid rgb(102, 102, 102);
  border-radius: 9px;
  -webkit-transition: 0.25s ease-out;
  animation: 0.25s ease-out 0s 1 scaleBtn;
}

@-webkit-keyframes scaleBtn {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1.0);
  }
}

.form-submit-button:hover {
  outline: 0;
  box-shadow: inset 0 5px 5px rgba(0, 0, 0, .075), 0 0 5px #6461ff;
  -webkit-box-shadow: inset 0 5px 5px rgba(0, 0, 0, .075), 0 0 5px #6461ff;
  -webkit-transition: 0.3s ease-out;
}

.flex-parent:hover .form-submit-button {
  background: #5c5c5c;
}

.input:hover {
  background: #3d3d3d;
}

s
/*/////////////////////////////////////////////////////////////////*/

button:focus {
  outline: 0;
}


/*///////////// HIGHLIGHT BOX ANIMATION /////////////// */

span input[type="text"] {
  border: 2px solid rgb(238, 238, 238);
  background-color: rgb(49, 49, 49);
  height: 40px;
  -webkit-transition: all .4s;
  -webkit-transform: translate(0px, 0);
  /* will-change: transform, opacity; */
  border: none;
  border: solid 1px #ccc;
  border-radius: 7px;
  -webkit-transition: 0.25s ease-out;
  animation: 0.25s ease-out 0s 1 scaleBtn;
}

@-webkit-keyframes scaleBtn {
  0% {
    transform: scale(0.65);
  }
  100% {
    transform: scale(1.0);
  }
}

span input[type="text"]:focus {
  margin: 3px;
  scale: 103%;
  border-color: #e63f3f;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(233, 102, 102, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(233, 102, 102, 0.6);
}

span input:focus {
  background-color: #3d3d3d;
  margin: 3px;
  scale: 103%;
  border-color: #e63f3f;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(233, 102, 102, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(233, 102, 102, 0.6);
}


/*///////////// PLACEHOLDER TEXT ANIMATION /////////////// */

.placeholder {
  position: relative;
  width: 0px;
  top: -32px;
  right: -5px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: normal;
  padding: 0px 0px;
  color: grey;
  -webkit-transition: 0.3s;
  -webkit-transform: translate(0px, 0);
  pointer-events: none;
  white-space: nowrap;
  opacity: 1;
}

.input:focus~.placeholder {
  top: -55px;
  right: -8px;
  font-size: 16px;
  font-weight: normal;
  color: #e4a8a8;
  opacity: 0;
}

.placeholder2 {
  position: relative;
  width: 0px;
  top: -50px;
  right: 0px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: normal;
  padding: 0px 0px;
  color: grey;
  -webkit-transition: 0.3s;
  -webkit-transform: translate(0px, 0);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
}

.input:focus~.placeholder2 {
  top: -75px;
  right: -8px;
  font-size: 16px;
  font-weight: normal;
  color: #e4a8a8;
  background-color: rgb(26, 26, 26);
  opacity: 1;
}

input:not(:focus) {
  top: -60px;
  right: -2px;
  font-size: 14px;
  color: rgba(158, 89, 89, 0);
}


/*////////////////////// DIV ALIGNMENT SIDE BY SIDE ////////////////////////*/

.inline-block-child {
  display: inline-block;
}

.flex-parent {
  display: flex;
}

.flex-child {
  flex: 2 1 auto;
}

.inline-flex-parent {
  display: inline-flex;
}


/*//////////////// TOP NAV  ///////////////// */

#box_active {
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: normal;
  color: #6461ff;
}

.no-underline {
  color: #ababab;
  text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="boxes.css">
  <title>Fruit box v1.0.2</title>

</head>

<body>

  <h4>MY FRUITS</h4>

  <section>
    <span >
        <div >
          <div >
            <div >
              <input type="text" id="linkBananas"  maxlength="" value="" autofocus="autofocus" autocomplete="off">
              <span >Search for bananas:</span>
    <span >Insert banana number:</span>

    </div>
    </div>
    &nbsp;&nbsp;
    <div >
      <button id="linkBananas_BT" type="submit"  tabindex="-1">SEARCH</button>
    </div>
    </div>
    </span>
  </section>

  <!-- /// -->

  <section>
    <span >
        <div >
          <div >
            <div >
              <input type="text" id="linkApples"  maxlength="" value="" autofocus="autofocus" autocomplete="off">
              <span >Search for apples:</span>
    <!--<span  >Enter apple number:</span> -->
    </div>
    </div>
    &nbsp;&nbsp;
    <div >
      <button id="linkApples_BT" type="submit"  tabindex="-1">SEARCH</button>
    </div>
    </div>
    </span>
  </section>

  <!-- /// -->

  <span >
      <div >
        <div >
          <div >
            <input type="text" id="linkPeach"  maxlength="" value="" autofocus="autofocus" autocomplete="off">
            <span >Search for peach:</span>
  <span >Enter peach number:</span>
  </div>
  </div>
  &nbsp;&nbsp;
  <div >
    <button id="linkPeach_BT" type="submit"  tabindex="-1">SEARCH</button>
  </div>
  </div>
  </span>

  <!-- /// -->

</body>

</html>

CodePudding user response：

Well, I didn't know exactly which space was wanted and which was unwanted, so here's what I came up with. I removed the &nbsp; in there, since white space should be declared with margin/padding in CSS, not in HTML (which should describe structure).

I modified the CSS such that the outer "top-nav" class is set to position: relative and the inner "placeholder" classes is now position: absolute. This changes the calculation of top/left/right for the placeholders. I don't like repeating myself, so I made "placeholder2" override some key properties of "placeholder". This reduces the amount of CSS considerably.

Just a design note: I'm not sure about increasing the size of the inputs on focus; it can produce a rather odd motion effect where things are getting out of the way of others. But that's a judgement call; there's nothing inherently wrong with that.

Also, setting outline to 0 or none on focus is a bad practice for accessibility reasons. See for example this article.

////////////////////////// - ANIMATE ITEMS ON LOAD - ////////////////////////

var items = document.querySelectorAll(".fade-item");
for (let i = 0; i < items.length;   i) {
  fadeIn(items[i], i * 50)
}

function fadeIn(item, delay) {
  setTimeout(() => {
    item.classList.add('fadein')
  }, delay)
}
body {
  background-color: rgb(26, 26, 26);
  color: rgb(204, 204, 204);
  width: 290px;
  height: 300px;
  border: solid 1px rgb(78, 78, 78);
  border-radius: 5px;
  padding: 10px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
}


/* ////////////////// ANIMATION ITEMS onl oad //////////////// */

.fade-item {
  transition: opacity transform 0.2s ease-in-out;
  opacity: 0;
}

.fadein {
  animation-name: fadeIn;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  100% {
    opacity: 1;
    transform: scale(1.0);
  }
}


/* ////////////////// STRUCTURE //////////////////// */

* {
  box-sizing: border-box;
}

@media screen and (max-width: 800px) {
  .topnav a,
  .topnav input[type=text],
  .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 200px;
    margin: 0px;
  }
  .topnav input[type=text] {
    border: 1px solid rgb(102, 102, 102);
    font-size: 16px;
  }
}

.top-nav {
  position: relative;
}

section {
  margin: 0 0 2rem;
}

/*////// BUTTON ///////*/

.form-submit-button {
  background: #464646;
  color: rgb(172, 172, 172);
  border-style: solid;
  height: 39px;
  width: 60px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 14px;
  border: 0px solid rgb(102, 102, 102);
  border-radius: 9px;
  -webkit-transition: 0.25s ease-out;
  animation: 0.25s ease-out 0s 1 scaleBtn;
}

@-webkit-keyframes scaleBtn {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1.0);
  }
}

.form-submit-button:hover {
  outline: 0;
  box-shadow: inset 0 5px 5px rgba(0, 0, 0, .075), 0 0 5px #6461ff;
  -webkit-box-shadow: inset 0 5px 5px rgba(0, 0, 0, .075), 0 0 5px #6461ff;
  -webkit-transition: 0.3s ease-out;
}

.flex-parent:hover .form-submit-button {
  background: #5c5c5c;
}

.input:hover {
  background: #3d3d3d;
}

/*/////////////////////////////////////////////////////////////////*/

/* Accessibility flag: this is a bad idea; many users depend on outline
   to see what button has the focus */
button:focus {
  outline: 0;
}


/*///////////// HIGHLIGHT BOX ANIMATION /////////////// */

.fade-item input[type="text"] {
  border: 2px solid rgb(238, 238, 238);
  background-color: rgb(49, 49, 49);
  height: 40px;
  -webkit-transition: all .4s;
  -webkit-transform: translate(0px, 0);
  /* will-change: transform, opacity; */
  border: solid 1px #ccc;
  border-radius: 7px;
  -webkit-transition: 0.25s ease-out;
  animation: 0.25s ease-out 0s 1 scaleBtn;
}

@-webkit-keyframes scaleBtn {
  0% {
    transform: scale(0.65);
  }
  100% {
    transform: scale(1.0);
  }
}

.fade-item input:focus {
  background-color: #3d3d3d;
  margin: 3px;
  scale: 103%;
  border-color: #e63f3f;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(233, 102, 102, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(233, 102, 102, 0.6);
}


/*///////////// PLACEHOLDER TEXT ANIMATION /////////////// */

.placeholder {
  position: absolute;
  width: 0px;
  top: 8px;
  left: 8px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: normal;
  padding: 0px 0px;
  color: grey;
  -webkit-transition: 0.3s;
  -webkit-transform: translate(0px, 0);
  pointer-events: none;
  white-space: nowrap;
  opacity: 1;
}

.input:focus~.placeholder {
  top: -55px;
  left: 8px;
  font-size: 16px;
  font-weight: normal;
  color: #e4a8a8;
  opacity: 0;
}

.placeholder2 {
  opacity: 0;
}

.input:focus~.placeholder2 {
  top: -12px;
  left: 8px;
  opacity: 1;
  background-color: rgb(26, 26, 26);
  width: auto;
}

input:not(:focus) {
  top: -60px;
  right: -2px;
  font-size: 14px;
  color: rgba(158, 89, 89, 0);
}


/*////////////////////// DIV ALIGNMENT SIDE BY SIDE ////////////////////////*/

.flex-parent {
  display: flex;
}

.flex-child {
  flex: 2 1 auto;
  display: flex;
}

.flex-child:last-child {
  justify-content: flex-end;
}
<h4>MY FRUITS</h4>
  <section>
    <div >
      <div >
        <div >
          <div >
            <input type="text" id="linkBananas"  maxlength="" value="" autofocus="autofocus" autocomplete="off">
            <span >Search for bananas:</span>
            <span >Insert banana number:</span>
          </div>
        </div>
        <div >
          <button id="linkBananas_BT" type="submit"  tabindex="-1">SEARCH</button>
        </div>
      </div>
    </div>
  </section>

  <!-- /// -->

  <section>
    <div >
      <div >
        <div >
          <div >
            <input type="text" id="linkApples"  maxlength="" value="" autofocus="autofocus" autocomplete="off">
            <span >Search for apples:</span>
    <!--<span  >Enter apple number:</span> -->
          </div>
        </div>
        <div >
          <button id="linkApples_BT" type="submit"  tabindex="-1">SEARCH</button>
        </div>
      </div>
    </div>
  </section>

  <!-- /// -->

  <div >
    <div >
      <div >
        <div >
          <input type="text" id="linkPeach"  maxlength="" value="" autofocus="autofocus" autocomplete="off">
          <span >Search for peach:</span>
          <span >Enter peach number:</span>
        </div>
      </div>
      <div >
        <button id="linkPeach_BT" type="submit"  tabindex="-1">SEARCH</button>
      </div>
    </div>
  </div>

CodePudding user response：

display: inline-grid; fixed the jerkiness and unwanted space: ( in case you prefer check solution here: https://jsfiddle.net/jqzzy/ztnp0275/115/ )

///////////////////////// - BODY LOAD FIX - ///////////////////////////////

window.addEventListener("load", () => {
    document.querySelector("body").classList.add("body_onload");
});

////////////////////////// - ANIMATE ITEMS ON LOAD - ////////////////////////

var items = document.getElementsByClassName("fade-item");
for (let i = 0; i < items.length;   i) {
    fadeIn(items[i], i * 50)
}
function fadeIn(item, delay) {
    setTimeout(() => {
        item.classList.add('fadein')
    }, delay)
}
body {
    background-color: rgb(26, 26, 26);
    color: rgb(204, 204, 204);
    border: solid 1px rgb(158, 0, 0);
    border-radius: 5px;
    padding: 10px;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    height: 500px;
    width: 290px;
}



/* ////////////////// ANIMATION ITEMS onl oad //////////////// */

.fade-item {
    transition: 0.2s ease-in-out;
    opacity: 0;
}

.fadein {
    animation-name: fadeIn;
    animation-duration: 0.2s;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }

    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}

/* ////////////////// STRUCTURE //////////////////// */

table.unstyledTable thead th {
    font-weight: normal;
}

.special-text {
    color: red;
}

.askit {
    color: red;
    font-size: 18px;
    padding: 2px;
    font-family: Calibri, Arial, Helvetica, sans-serif;
}

.title {
    color: rgb(231, 231, 231);
    font-size: 16px;
    padding: 3px;
    font-family: Calibri, Arial, Helvetica, sans-serif;
}

.sections {
    color: rgb(168, 168, 168);
    font-size: 14px;
    padding: 2px;
    font-family: Calibri, Arial, Helvetica, sans-serif;
}

.footing {
    color: rgb(155, 155, 155);
    position: absolute;
    right: 15px;
    bottom: 10px;
    font-size: 10px;
    padding: 2px;
    font-family: Calibri, Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

@media screen and (max-width: 800px) {

    .topnav a,
    .topnav input[type=text],
    .topnav .search-container button {
        float: none;
        display: block;
        text-align: left;
        width: 200px;
        margin: 0px;

    }

    .topnav input[type=text] {
        border: 1px solid rgb(102, 102, 102);
        font-size: 16px;
    }
}

.top-nav {
    position: relative;
}

/*////// BUTTON ///////*/

.form-submit-button {
    background: #464646;
    color: rgb(172, 172, 172);
    border-style: solid;
    height: 39px;
    width: 60px;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: 14px;
    border: 0px solid rgb(102, 102, 102);
    border-radius: 9px;
    -webkit-transition: 0.25s ease-out;
    animation: 0.25s ease-out 0s 1 scaleBtn;
}

@-webkit-keyframes scaleBtn {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1.0);
    }
}

.form-submit-button:hover {
    outline: 0;
    box-shadow: inset 0 5px 5px rgba(0, 0, 0, .075), 0 0 5px #6461ff;
    -webkit-box-shadow: inset 0 5px 5px rgba(0, 0, 0, .075), 0 0 5px #6461ff;
    -webkit-transition: 0.25s ease-out;
    display: inline;
}

.flex-parent:hover .form-submit-button {
    background: #5c5c5c;
    display: inline;
}

.input:hover {
    background: #3d3d3d;
    display: inline;
}

s
/*/////////////////////////////////////////////////////////////////*/

button:focus {
    outline: 0;
}

/*///////////// HIGHLIGHT BOX ANIMATION /////////////// */

span input[type="text"] {
    border: 2px solid rgb(238, 238, 238);
    background-color: rgb(49, 49, 49);
    height: 40px;
    -webkit-transition: all .4s;
    -webkit-transform: translate(0px, 0);
    /* will-change: transform, opacity; */
    border: none;
    border: solid 1px #ccc;
    border-radius: 7px;
    -webkit-transition: 0.25s ease-out;
    animation: 0.25s ease-out 0s 1 scaleBtn;
}

@-webkit-keyframes scaleBtn {
    0% {
        transform: scale(0.65);
    }

    100% {
        transform: scale(1.0);
    }
}

span input[type="text"]:focus {
    margin: 0x;
    scale: 103%;
    border-color: #e63f3f;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(233, 102, 102, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(233, 102, 102, 0.6);
}

span input:focus {
    background-color: #3d3d3d;
    margin: 3px;
    scale: 103%;
    border-color: #e63f3f;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(233, 102, 102, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(233, 102, 102, 0.6);
}

/*///////////// PLACEHOLDER TEXT ANIMATION /////////////// */

.placeholder {
    position: relative;
    width: 0px;
    top: -32px;
    right: -5px;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
    padding: 0px 0px;
    color: grey;
    -webkit-transition: 0.25s;
    -webkit-transform: translate(0px, 0);
    pointer-events: none;
    white-space: nowrap;
    opacity: 1;
}

.input:focus~.placeholder {
    top: -55px;
    right: -8px;
    font-size: 16px;
    font-weight: normal;
    color: #e4a8a8;
    opacity: 0;
}

.placeholder2 {
    position: relative;
    width: 0px;
    top: -50px;
    right: 0px;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
    padding: 0px 0px;
    color: grey;
    -webkit-transition: 0.25s;
    -webkit-transform: translate(0px, 0);
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
}

.input:focus~.placeholder2 {
    top: -70px;
    right: -8px;
    font-size: 16px;
    font-weight: normal;
    color: #e4a8a8;
    background-color: rgb(26, 26, 26);
    opacity: 1;
}

input:not(:focus) {
    top: -60px;
    right: -2px;
    font-size: 14px;
    color: rgba(158, 89, 89, 0);
}

/*////////////////////// DIV ALIGNMENT SIDE BY SIDE ////////////////////////*/

.inline-block-child {
    display: inline-block;
}

.flex-parent {
    display: flex;
}

.flex-child {
    flex: 2 1 auto;
}

.inline-flex-parent {
    display: inline-flex;
}

/*//////////////// TOP NAV  ///////////////// */

#box_active {
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #6461ff;
}

.no-underline {
    color: #ababab;
    text-decoration: none;
}

/*//////////////////////////////////////////////////////////*/

.grid-container {
    display: inline-grid;
    max-width: 265px;
    max-height: 370px;
    gap: 10px;
    /*background-color: grey;*/
    padding: 0px;
    grid-template-columns: 200px 60px;
    grid-template-rows: 45px 45px 45px 45px 45px 45px 45px 45px 45px 45px 45px 45px;

}

.grid-item {
    /*background-color: purple;*/
    border: none;
}

.item1 {
    grid-column: 1;
    grid-row: 1;
}

.item2 {
    grid-column: 2;
    grid-row: 1;
}

.item3 {
    grid-column: 1;
    grid-row: 2;
}

.item4 {
    grid-column: 2;
    grid-row: 2;
}

.item5 {
    grid-column: 1;
    grid-row: 3;
}

.item6 {
    grid-column: 2;
    grid-row: 3;
}

.item7 {
    grid-column: 1;
    grid-row: 4
}

.item8 {
    grid-column: 2;
    grid-row: 4
}

.item9 {
    grid-column: 1;
    grid-row: 5
}

.item10 {
    grid-column: 2;
    grid-row: 5
}

.item11 {
    grid-column: 1;
    grid-row: 6;
}

.item12 {
    grid-column: 2;
    grid-row: 6
}

.item13 {
    grid-column: 1;
    grid-row: 7;
}

.item14 {
    grid-column: 2;
    grid-row: 7;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="boxes.css">
    <title>Fruit box v1.0.2</title>

  </head>

  <body>

    <h4>MY FRUITS</h4>
<div >
    <div >

      <!-- /// -->

      <section>
        <span >
          <div >
            <div >
              <div >
                <div >
                  <input type="text" id="linkKBs"  maxlength="" value="" autofocus="autofocus" autocomplete="off">
                  <span >Bananas:</span><br/>
                  <span >Search Bananas:</span>
                </div>
              </div>
            </div>&nbsp;&nbsp;
            <div >
              <div >
                <button id="linkKBs_BT" type="submit"  tabindex="-1">SEARCH</button>
              </div>
            </div>
          </div>
        </span>
      </section><br />

      <!-- /// -->

      <section>
        <span >
          <div >
            <div >
              <div >
                <div >
                  <input type="text" id="linkInc"  maxlength="" value="" autofocus="autofocus" autocomplete="off">
                  <span >Oranges:</span><br/>
                  <span >Search Oranges:</span>
                </div>
              </div>
            </div>&nbsp;&nbsp;
            <div >
              <div >
                <button id="linkInc_BT" type="submit"  tabindex="-1">SEARCH</button>
              </div>
            </div>
          </div>
        </span>
      </section><br />

      <!-- /// -->

      <span >
        <div >
          <div >
            <div >
              <div >
                <input type="text" id="linkAAChan"  maxlength="" value="" autofocus="autofocus" autocomplete="off">
                  <span >Peaches:</span><br/>
                  <span >Search Peaches:</span>
              </div>
            </div>
          </div>&nbsp;&nbsp;
          <div >
            <div >
              <button id="linkAAChan_BT" type="submit"  tabindex="-1">SEARCH</button>
            </div>
          </div>
        </div>
      </span><br />

      <!-- /// -->

      <span >
        <div >
          <div >
            <div >
              <div >
                <input type="text" id="linkDirKB"  maxlength="" value="" autofocus="autofocus" autocomplete="off">
                  <span >Papayas:</span><br/>
                  <span >Search Papayas:</span>
              </div>
            </div>
          </div>&nbsp;&nbsp;
          <div >
            <div >
              <button id="linkDirKB_BT" type="submit"  tabindex="-1">SEARCH</button>
            </div>
          </div>
        </div>
      </span><br />

      <!-- /// -->

      <span >
        <div >
          <div >
            <div >
              <div >
                <input type="text" id="linkDirInc"  maxlength="" value="" autofocus="autofocus" autocomplete="off">
                  <span >Pears:</span><br/>
                  <span >Search Pears:</span>
              </div>
            </div>
          </div>&nbsp;&nbsp;
          <div >
            <div >
              <button id="linkDirInc_BT" type="submit"  tabindex="-1">SEARCH</button>
            </div>
          </div>
        </div>
      </span><br />

      <!-- /// -->

      <span >
        <div >
          <div >
            <div >
              <div >
                <input type="text" id="linkDirReq"  maxlength="" value="" autofocus="autofocus" autocomplete="off">
                  <span >Apples:</span><br/>
                  <span >Search Apples:</span>
              </div>
            </div>
          </div>&nbsp;&nbsp;
          <div >
            <div >
              <button id="linkDirReq_BT" type="submit"  tabindex="-1">SEARCH</button>
            </div>
          </div>
        </div>
      </span><br />

      <!-- /// -->

      <span >
        <div >
          <div >
            <div >
              <div >
                <input type="text" id="linkDirEndPt"  maxlength="" value="" autofocus="autofocus" autocomplete="off">
                  <span >Avocatos:</span><br/>
                  <span >Search Avocatos:</span>
              </div>
            </div>
          </div>&nbsp;&nbsp;
          <div >
            <div >
              <button id="linkDirEndPt_BT" type="submit"  tabindex="-1">SEARCH</button>
            </div>
          </div>
        </div>
      </span><br />

      <!-- /// -->

    </div>
    </div>

  </body>

</html>

Page link：https//www.codepudding.com/Backend/594685.html

Prev:On mouse hover changing picture with JavaScript with less code
Next:How to remove the box border?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding