CODEWITHSUNDEEP
htmlcss
aksl
aksl

Reputation: 35

How to keep few inputs horizontally using CSS

I am developing a website and I want to keep few inputs horizontally. This is my CSS code

  .input-group {
  position: relative;
  margin: 40px 0 20px;
}

input {
     display: inline block;
     width: 12%;
     background: #EAF6F6;

  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  border: 0px solid #757575;
  border-radius: 5px;

}

input:focus {
  outline: none;
}

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

input:focus ~ label,
input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #4285f4;
}

.bar {
  position: relative;
  display:block;
  width:14%;
}

.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #4285f4;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}

input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

/* animations */
@-webkit-keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}
@-moz-keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}
@keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}

This is my HTML code

 <div class="input-group">
  <input type="text" required>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>Quantity</label>
</div>

<div class="input-group">
  <input type="text" required>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>price</label>
</div>

<div class="input-group">
  <input type="text" required>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>Total</label>
</div>


 <div class="input-group">
  <input type="text" required>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>Quantity</label>
</div>

<div class="input-group">
  <input type="text" required>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>price</label>
</div>

<div class="input-group">
  <input type="text" required>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>Total</label>
</div>

But all inputs are in vertically. As thisActually now

But I Expect like this Actually I expect

I tried several ways. But unable to do. How to solve it. I found some bootstrap solutions. But I Do not expect Bootstrap. Expect pure CSS.

Upvotes: 0

Views: 51

Answers (1)

dale landry
dale landry

Reputation: 8610

Wrap the inputs you wish to be displayed horizontally on the page within a flex group div. See the css class flex-group in the example snippit below

Css-Tricks on flexbox Mozilla flexbox

/* display:flex for this class */
.flex-group {
  display: flex;
  margin: 10px auto; /* set to 10px auto here */
}

.input-group {
  position: relative;
  margin: auto; /* set margin to auto here */
}

input {
  display: inline block;
  background: #EAF6F6;
  width: 90%; /* set to 80% width */
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  border: 0px solid #757575;
  border-radius: 5px;
}

input:focus {
  outline: none;
}

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

input:focus~label,
input:valid~label {
  top: -20px;
  font-size: 14px;
  color: #4285f4;
}

.bar {
  position: relative;
  display: block;
  width: 14%;
}

.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #4285f4;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}

input:focus~.bar:before,
input:focus~.bar:after {
  width: 50%;
}

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

input:focus~.highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}


/* animations */

@-webkit-keyframes inputHighlighter {
  from {
    background: #4285f4;
  }
  to {
    width: 0;
    background: transparent;
  }
}

@-moz-keyframes inputHighlighter {
  from {
    background: #4285f4;
  }
  to {
    width: 0;
    background: transparent;
  }
}

@keyframes inputHighlighter {
  from {
    background: #4285f4;
  }
  to {
    width: 0;
    background: transparent;
  }
}

This is my HTML code
<div class="flex-group"><!--/ added div with class of flex-group => display: flex; /-->
  <div class="input-group">
    <input type="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Quantity</label>
  </div>

  <div class="input-group">
    <input type="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>price</label>
  </div>

  <div class="input-group">
    <input type="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Total</label>
  </div>
</div><!--/ END flex-group /-->
<div class="flex-group"><!--/ start new flex-group class /-->
  <div class="input-group">
    <input type="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Quantity</label>
  </div>

  <div class="input-group">
    <input type="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>price</label>
  </div>

  <div class="input-group">
    <input type="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Total</label>
  </div>
</div><!--/ END flex-group /-->

Upvotes: 2

Related Questions