javascript - body - title html

¿Cómo expandir el pequeño cuadro de entrada cuadrado al golpear el ícono de búsqueda en css?

Question

Tengo una barra de búsqueda con el ícono de búsqueda en el extremo izquierdo como se muestra aquí en el fiddle y en la captura de pantalla a continuación .

Los códigos HTML y CSS que he usado para hacer el ícono de búsqueda y el borde cuadrado son:

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%;
}

Planteamiento del problema:

Si presiono el ícono de búsqueda, el pequeño cuadro de entrada cuadrado (marcado por una flecha en la captura de pantalla) que rodea el ícono de búsqueda debería expandirse de manera similar a here .

Aquí está mi fiddle actualizado que está funcionando casi bien, pero estas dos cosas no puedo entender cómo hacerlo :

• La caja cuadrada debe volver a la posición original después de golpear en cualquier lugar afuera.
• Cuando el borde cuadrado blanco se expande, el fondo interior debe ser blanco.

¿Alguna idea sobre cómo se puede hacer esto?

Answer 1

Aquí está el link violín actualizado

.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 es necesario agregar javascript. Al hacer clic en la entrada , se enfoca , que se puede usar en css para apuntarlo y agregarle ancho. Cuando haces clic afuera, la entrada se desenfoca y vuelve a su tamaño original

Answer 2

Aquí está la solución para el icono de búsqueda expandir,
Demostración de JSFiddle - JSFiddle

CSS (solo agregó esta parte) -

.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 (solo editar esta parte) -

<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");
}
});

Answer 3

Creo que esto es lo que quieres

.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>

Answer 4

Creo que no acostumbra usar javascript, debe depender del enfoque que se puede usar en css para apuntarlo y agregarle ancho. Cuando hace clic afuera, la entrada se desenfoca y vuelve a su tamaño original.

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>

Answer 5

El comportamiento que estás buscando es modificar su ancho cuando te enfocas (haz clic con el mouse dentro de él):

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

Pero antes de cambiar su ancho, deberá darle un valor más bajo, por ejemplo:

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

Answer 6

El enlace que le proporcionas a smialar here tiene un ícono, sin embargo, la imagen del ícono existe en el Css no en el HTML, por lo que una vez que haces clic en la entrada o el ícono, se anima.

en el caso de su código, existe en el html, por lo que no funcionó,

soluciones:

1. o bien incluye el icono (imagen) en el css como una propiedad de imagen de fondo para la entrada. (Le dejaré a usted cómo averiguar cómo puede hacerlo ya que tiene el enlace y el ejemplo;)
2. incluyes JavaScript (JQuery), creo que Jquery es el más fácil en este caso

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: incluye Jquery 3.1.1 delgado importante

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

Este es un ejemplo de demostración: Haga clic aquí.

Por supuesto, hay muchas maneras diferentes si desea seguir buscando

Answer 7

Espero que esto funcione para ti:

Si no te importa tengo que cambiar el orden de tu elemento.

Solo he usado CSS para lograr este resultado.

.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>

Creo que el código anterior cubrirá todas sus necesidades. Si hay algo más, por favor, publique un comentario, haré todo lo posible para ayudarlo.

Answer 8

Esto se puede hacer así.

.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>

Answer 9

Modifiqué tu violín "actualizado" para obtener este resultado:

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

He modificado solo un poco el CSS (color y ancho del icono),
Luego usé un selector de CSS :focus , como este:

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

Usar :focus selector de :focus es, en mi opinión, la forma más fácil y adecuada de lograr lo que desea.

Entonces ... quería eliminar el JS al principio, pero finalmente lo usé así:
El clic en el icono establece el enfoque en la entrada, de modo que se aplique el CSS anterior. Eso es todo.

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

¿Es así como querías que fuera?
Espero que ayude.

Answer 10

Necesitas modificar tu jQuery

Eliminará su efecto de expansión al hacer clic en el documento en cualquier lugar y cambiará el color de fondo del campo de entrada.

$(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>

Trabajando el violín here

Answer 11

Pensé que no quieres usar JavaScript. Desde el código que proporcionó, solo necesita agregar el selector de enfoque a su clase de extensión. Espero que esto ayude.

.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>

Answer 12

Podría crear un elemento principal para los elementos de input e icon , de modo que pueda colocar el icon con la posición absoluta en relación con ese elemento principal.

Y luego también puede crear una clase, por ejemplo active , que puede activar y desactivar los eventos de blur en la entrada, pero la clase cambiará en ese elemento principal. Y luego, en función de esa clase, puede escribir la entrada y el icono.

Tenga en cuenta que si desea cambiar la entrada en % y no en px el ancho dependerá del elemento padre. Entonces, si desea algún otro elemento en la misma línea que su elemento de form , entonces debería usar el width en px como este 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>

Si desea alternar la clase activa solo al hacer clic en el icon y eliminarla también en el evento de blur entrada, puede usar jquery para enfocar el elemento en el evento mouseup .

$(".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>

Answer 13

Puede intentar agregar el selector: hover y: focus a su clase de extensión. espero que esto ayude

.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>

Answer 14

Puedes usar CSS :focus con transition . Pero primero necesitas establecer el valor inicial.

#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/

Answer 15

Simplemente usa el foco y la propiedad del padre principal

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

Pero revertir no va a funcionar. Como la clase extand está anidada en la parte posterior.

Answer 16

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%;
}

Aquí hay un jsFidde: https://jsfiddle.net/r5kLh7p6/3/

Espero que ayude.