CODEWITHSUNDEEP
javascripthtmlcssfont-awesome
flash
flash

Reputation: 1519

How to expand small square input box on hitting search icon in css?

I have a search-bar with search icon at the extreme left as shown here in the fiddle and in the screen shot below.

enter image description here

The HTML and CSS codes which I have used in order to make the search icon and the square border is:


HTML:

<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extand ">
</form>


CSS:

.back{
  padding: 0.5%;
  background: #10314c;

}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 2.4%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.extand-now {
    width: 50%;
}


Problem Statement:

If I hit on the search-icon, the small square input box (marked by an arrow in the screen shot) surrounding the search icon should expand similar to here.

Here is my updated fiddle which is working almost right but these two things I am not able to figure out how to do it:

Any thoughts on how this can be done?

Upvotes: 17

Views: 9433

Answers (17)

Markus
Markus

Reputation: 101

  • Square box should come back to the original position after hitting anywhere outside.

You might update your jQuery code to this:

// for the icon
$(".searchicon").click(function() {
  $('.extand').focus();
});
// for the input
$(".extand").focus(function() {
   $('.extand').addClass('extand-now');
}).blur(function() {
   $('.extand').removeClass('extand-now');
});

Upvotes: 0

Sayo Komolafe
Sayo Komolafe

Reputation: 1008

You can try adding the :hover and :focus selector to your extand class. I hope this helps

.back{
  padding: 2%;
  background: #10314c;
}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 30px;
   left: 20px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 12%;
    height:40px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    padding: 12px 20px 12px 40px;
 
}

.extand:hover {
    cursor: pointer;
}

.extand:focus {
    width: 100%;
    background-color: #fff;
}

.extand:focus + .searchicon {
    color: black;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extand">
</form>

Upvotes: 2

Sayo Komolafe
Sayo Komolafe

Reputation: 1008

I figured you don't want to use JavaScript. From the code you provided, you only need to add the :focus selector to your extand class. I hope this helps.

.back{
  padding: 2%;
  background: #10314c;
}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 35px;
   left: 25px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 10%;
    height:45px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    padding: 12px 20px 12px 45px; 
    color: white;
}

.extand:hover{
    cursor:pointer;
}

.extand:focus {
    width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extand">
</form>

Upvotes: 3

Nenad Vracar
Nenad Vracar

Reputation: 122087

You could create one parent element for input and icon elements so that you can position icon with position absolute relative to that parent element.

And then you can also create one class, for example active, that you can toggle on focus and blur events on input, but the class will change on that parent element. And then based on that class you can style input and icon.

Note that if you want to change input in % and not in px that width will depend on parent element. So if you want some other element in the same line as your form element then you should use width in px like this DEMO

$(".form-field input").on('focus blur', function() {
  $(this).parent().toggleClass('active');
})
.back{
  padding: 10px;
  background: #10314c;
}
.form-field {
  position: relative;
}
.form-field i {
  transition: all 0.2s ease-in;
  color: white;
  position: absolute;
  transform: translateY(-50%);
  left: 10px;
  top: 50%;
}
.form-field input {
  transition: all 0.2s ease-in;
  background: transparent;
  border: 1px solid white;
  border-radius: 4px;
  padding: 5px 10px 5px 30px;
  color: white;
  width: 120px;
}
.form-field.active i {
  color: black;
}
.form-field.active input {
  background: white;
  color: black;
  width: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="back">
  <div class="form-field">
    <i class="fa fa-search searchicon" aria-hidden="true"></i>
    <input placeholder="Search..." type="text" name="search" class="extand ">
  </div>
</form>

If you want to toggle active class only on icon click and remove it also on input blur event, you could then use jquery to focus element on mouseup event.

$(".form-field i").on('mousedown', function(e) {
  $(this).parent().toggleClass('active');
})

$(".form-field i").on('mouseup', function(e) {
  $(this).next('input').focus()
  if (!$(this).parent().hasClass('active')) {
    $(this).next('input').blur()
  }
})

$(".form-field input").on('focus', function(e) {
  if (!$(this).parent().hasClass('active')) {
    $(this).blur()
  }
})

$(".form-field input").on('blur', function(e) {
  $(this).parent().removeClass('active')
})
.back{
  padding: 10px;
  background: #10314c;
}
.form-field {
  position: relative;
}
.form-field i {
  transition: all 0.2s ease-in;
  color: white;
  position: absolute;
  transform: translateY(-50%);
  left: 15px;
  top: 50%;
}
.form-field input {
  transition: all 0.2s ease-in;
  background: transparent;
  border: 1px solid white;
  border-radius: 4px;
  padding: 5px 10px 5px 35px;
  color: white;
  width: 0;
}
.form-field.active i {
  color: black;
  display: block;
}
i:hover {
  cursor: pointer;
}
.form-field.active input {
  background: white;
  color: black;
  width: 300px;
}
.other {
  color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="back">
  <div class="form-field">
    <i class="fa fa-search searchicon" aria-hidden="true"></i>
    <input type="text" name="search" class="extand ">
  </div>
</form>

Upvotes: 4

Zuber
Zuber

Reputation: 3473

You need to modify your jQuery

It will remove your expand effect on click on the document anywhere and change background-color of the input field.

$(document).click(function(e){
// this line will check if the user has click on search icon or input
   if( $(e.target).hasClass('searchicon') || $(e.target).hasClass('extand'))   {  
   // this will toggle class and add background css
    $('.extand').toggleClass('extand-now').css('background-color','white');
   
   } else {
   // this will remove class if user click anywhere outside the input field or search icon and set background css
   $('.extand').removeClass('extand-now').css('background-color','#10314c');
   }
});
.back{
  padding: 0.5%;
  background: #10314c;
    
}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }
   
.extand {
    width: 2.4%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.extand-now {
    width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extand ">
</form>

Working fiddle here

Upvotes: 3

Mohamed Elshahawy
Mohamed Elshahawy

Reputation: 113

i think you do't wont to use javascript, you should depend on focus which can be used in css to target it and add width to it, When u click outside, the input gets unfocused and returns back to original size

input{
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url(https://i.imgur.com/MACjo6S.png);
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input:focus {
    width: 100%;
}
<form>
  <input type="text" name="search" placeholder="Search..">
</form>

Upvotes: 5

Jithin Raj P R
Jithin Raj P R

Reputation: 6827

I hope this works for you:

If you don't mind I have change the order of your element

I have only used CSS to achieve this result.

.back {
  padding: 0.5%;
  background: #10314c;
}

.searchicon {
  float: left;
  margin-top: -22px;
  position: relative;
  top: 26px;
  left: 8px;
  color: white;
  z-index: 2;
  width: 18px;
  pointer-events: none;
}

.extand {
  width: 30px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background: #10314c;
  color:#10314c;/* I have used same color as the background so after the search the text will not visible to the user */
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  cursor: pointer;/* Set curson pointer so the user think it's a button of search */
}

.extand:focus,
.extand:active {
  width: 50%;
  cursor: text;/* To change the curson to text */
  background: #fff;
  outline: none;
}

.extand:focus+.searchicon,
.extand:active+.searchicon {
  display: none;/* this will hide the search icon on click of the input */
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<form class="back">
  <input type="text" name="search" class="extand ">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
  </span>
</form>

I think above code will cover all your needs. If there is anything else please do post a comment, I will try my best to help you.

Upvotes: 1

Mithu Mondal
Mithu Mondal

Reputation: 265

HTML:

<form class="back">
     <input type="text" name="search" class="extand " placeholder="&#x1F50D; Search for something">
</form>

CSS:

    *{
        margin:0;
    }

    .back{
      padding: 0.5%;
      background: #10314c;

    }

    .searchicon {
       float: left;
       margin-top: -20px;
       position: relative;
       top: 26px;
       left: 8px;
       color: white;
       z-index: 2;
       }

    .extand {
        width: 2.4%;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background: #10314c;
        background-position: 10px 10px;
        background-repeat: no-repeat;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;

        padding:5px;
    }

/*use :focus to expand the input field (search bar) on focus*/

    .extand:focus{
        background-color:#fff;
        color:black;
        width:40%;
    }

Here's a jsFidde: https://jsfiddle.net/r5kLh7p6/3/

Hope that helps.

Upvotes: 2

user8718268
user8718268

Reputation:

I think this is what you want

.back{
  padding: 0.5%;
  background: #10314c;
    
}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   /* Allows focusing the input element *through* the search icon */
   pointer-events: none;
}
   
.extand {
    width: 4%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    padding-left:30px;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

.extand:focus {
    width: 50%;
    background-color: #fff;
}

.extand:focus + .searchicon {
  color: black;
}
<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extand ">
</form>

Upvotes: 1

Pranab
Pranab

Reputation: 305

Here's the Solution for the search icon expand,
JSfiddle Demo - JSFiddle

CSS (only added this part) - 

.search {
  border: 1px solid red;
  position: relative;
    transition: 0.2s linear;
    width: 85%;
}

.search.toggle-off {
    width: 22px;
    transition: 0.2s linear;
}

.search .searchicon {
  position: absolute;
  right: 0;
  width: 22px;
  background: red;
  color: white;
  border: 1px solid #FFFFFF;
  z-index: 2;
  padding: 3px;
}

.search input[type=text] {
  width: calc(100% - 22px);
  background: #10314c;
}

HTML (only edit this part) - 

<div class="search toggle-off">
  <span class="fa fa-search searchicon" aria-hidden="true"></span>
  <input type="text" name="search">
</div>

JS - 

var searchicon = document.querySelector(".searchicon"),
search = document.querySelector(".search");

searchicon.addEventListener("click", function(){
    if(search.classList.contains("toggle-off")){
        search.classList.remove("toggle-off");
    }
    else{
        search.classList.add("toggle-off");
    }
});

Upvotes: 1

Takit Isy
Takit Isy

Reputation: 10081

I modified your "updated" fiddle to get to this result:

https://jsfiddle.net/p8zrst2p/98/

I modified just a little the CSS (color and width of the icon),
then used a CSS :focus selector, like this:

.extand:focus {
    width: 50%;
    background: #fff;
}

Using :focus selector is, in my opinion, the easier and proper way to achieve what you want.

Then… I wanted to remove the JS at first, but finally I used it like this:
The click on the icon sets the focus on the input, so that the CSS above is applied. That's all.

// Focus input when icon clicked
$(".searchicon").click(function() {
  $('.extand').focus();
});

Is that the way you wanted it to be?
I hope it helps.

Upvotes: 1

Dadhich Sourav
Dadhich Sourav

Reputation: 289

Simply use the focus and parent child property

.back:focus ~ .extand{
    width:50%;  /*increase width as per your choice.
}

But reverse is not going to work.As extand class is nested inside back.

Upvotes: 0

Gautam Naik
Gautam Naik

Reputation: 9368

Here is the updated fiddle link

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   pointer-events:none; /*Add this to ur css*/
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 2.4%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.extand:focus {
  width: 50%;
  background: white;
}
.extand:focus + span{  /*hide icon*/
  display:none;
}

no need to add javascript. On click of input, it gets focused, which can be used in css to target it and add width to it, When u click outside, the input gets unfocused and returns back to original size

Upvotes: 12

Munim Munna
Munim Munna

Reputation: 17556

This can be done like this

.back {
  padding: 0.5%;
  background: #10314c;
}

.searchicon {
  float: left;
  margin-top: -20px;
  position: relative;
  top: 24px;
  left: 8px;
  color: white;
  z-index: 2;
}

.extend {
  width: 24%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background: #10314c;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

.extend:focus {
  width: 50%;
  background: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extend ">
</form>

Upvotes: 1

Wael Azar
Wael Azar

Reputation: 321

The link that you provide it to smialar example does has an icon however the icon image exist in the Css not the HTML, so that once you click on the input or the icon, it animate.

in the case of your code it, it is exist in the html, so that i didn't work,

solutions:

  1. either you include the icon (image) in the css as a background-image property for the input. (i will leave it up to you how to figure out how you can do it since you have the link and the example ;)
  2. you include some JavaScript(JQuery), i believe Jquery is the easiest in this case

HTML:

    <form class="back">
        <span class="fa fa-search searchicon" aria-hidden="true"></span>
        <input type="text" name="search" class="extand ">
    </form>

CSS:

.back{
   width: 50%;
   background: #10314c;   
}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }

.extand {
   width: 10%;
   box-sizing: border-box;
   border: 2px solid #ccc;
   border-radius: 4px;
   font-size: 16px;
   background: #10314c;
   background-position: 10px 10px;
   background-repeat: no-repeat;
   -webkit-transition: width 0.4s ease-in-out;
   transition: width 0.4s ease-in-out;
}
.extand-now {
   width: 100%;
}

JQuery: include Jquery 3.1.1 slim important 

// for the icon
$(".searchicon").click(function() {
  $('.extand').toggleClass('extand-now');
});
// for the input
$(".extand").click(function() {
   $('.extand').toggleClass('extand-now');
});

this is demo example : Click here

of course there are many different ways if you want to keep searching

Upvotes: 4

Cuong Vu
Cuong Vu

Reputation: 3733

You can use CSS :focus with transition. But first you need to set initial value

#ellipsis {
    top: 12px;
    position: absolute;
    right: 20px;
}
#ellipsis:focus {
	outline: none;
}
#ellipsis:focus + .dropdown {
	display: block;
}


input[type=text] {
    width: 50%;
    background: #10314c;
    transition: 1s;
}
input[type=text]:focus {
    width: 100%;
    background: #10314c;
    transition: 1s;
}


.dropdown {
	background-color: lightblue;
	display: none;
	position: absolute;
	height: 150px;
	right: 0;
	width: 200px;
	z-index: 10;
}

.searchicon {
    float: left;
    margin-top: -20px;
    position: relative;
    top: 26px;
    left: 8px;
    color: white;
    z-index: 2;
}
<div class="nav-top-searchbar">
    <form>
        <span class="fa fa-search searchicon" aria-hidden="true"></span>
        <input type="text" name="search">
				<div style="">
					<img tabindex="1" src="https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id="ellipsis">
					<div class="dropdown">
						insert your stuff here
					</div>					
				</div>
        

    </form>
</div>


<div class="body-manage-attendees">
    <div class="container-fluid">

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Name
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                Number
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                Table
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Amanda Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Andy Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                14
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                1
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                No Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Cameron Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                No Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Dana Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                53
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                5
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Absent
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Eve Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Absent
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Fred Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Fred Doe's Guest1
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Jack Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                14
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Jack Doe's Guest 1
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                15
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                No Bill
            </div>
        </div>



        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Jack Doe's Guest 2
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                16
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                5
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Lydia Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-sm-4 col-lg-4" style="background-color:white;">
                Noah Doe
            </div>
            <div class="col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Meena Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Brenda Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                14
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                1
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Cameron Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Brenda Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                14
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                1
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Cameron Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Noah Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Dana Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                53
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                5
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Unpaid
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Eve Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Items Received
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Fred Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Items Received
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Fred Doe's Guest1
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Items Waiting
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Jack Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Unpaid
            </div>
        </div>

    </div>

</div>

https://jsfiddle.net/kiidkupy/nc2djn5p/65/

Upvotes: 2

Ignacio Ara
Ignacio Ara

Reputation: 2582

The behavior that you're looking for is to modify its width when you focus (click your mouse inside of it):

input[type=text]:focus {
    width: 100%;
}

But before changing its width you'll need to give it a lower value, for example:

input[type=text] {
    width: 20%;
    background: #10314c;
}

Upvotes: 1

Related Questions