Обработка события click средствами CSS

[Heidel]

Обработка события click средствами CSS

http://ruseller.com/lessons.php?rub=2&id=1600

HTML

<div class="search-wrapper">
					<input type="checkbox" class="show-search" id="show-search">
					<label for="show-search"></label>
					<input type="search" name="search" class="search-input" onfocus="this.placeholder=''" onblur="this.placeholder='Поиск'" placeholder="Поиск">
				</div>

LESS

.search-wrapper {
	position: relative;
	margin: 10px 0;
	
	input[type=checkbox] {
		position: absolute;
		left: -9999px;
	}
	
	label {
		display: block;
		width: 40px;
		height: 40px;
		background: url('../img/sprite_1.jpg') 0 0 no-repeat;
		cursor: pointer;
		z-index: 5;
		position: relative;
	}
	
	input[type=checkbox]:checked ~ label {
		background: url('../img/sprite_1.jpg') 0 -40px no-repeat;
	}

	.search-input {
		background: #ffffff;
		border: 2px solid #4693b6;
		border-left: 0;
		height: 40px;
		width: 0;
		position: absolute;
		top: 0;
		left: 0;
		font: 20px/1.2 Arial, sans-serif;
		.transition (0.2s);
		padding: 0 8px;
		color: #000;
		.box-sizing();
		
		&::-webkit-input-placeholder{
			color: #6c6c6c;
		}
		&::-moz-placeholder {
			color: #6c6c6c;
		}
		&:-moz-placeholder {
			color: #6c6c6c;
		}
		&:-ms-input-placeholder	{
			color: #6c6c6c;
		}
	}
	
	input[type=checkbox]:checked ~ .search-input {
		width: 198px;
		left: 40px;
	}
}

CSS

.search-wrapper {
  position: relative;
  margin: 10px 0;
}

.search-wrapper input[type=checkbox] {
  position: absolute;
  left: -9999px;
}

.search-wrapper label {
  position: relative;
  z-index: 5;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: url('../img/sprite_1.jpg') 0 0 no-repeat;
}

.search-wrapper input[type=checkbox]:checked ~ label {
  background: url('../img/sprite_1.jpg') 0 -40px no-repeat;
}

.search-wrapper .search-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 40px;
  padding: 0 8px;
  font: 20px/1.2 Arial, sans-serif;
  color: #000;
  background: #ffffff;
  border: 2px solid #4693b6;
  border-left: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: 0.2s;
     -moz-transition: 0.2s;
      -ms-transition: 0.2s;
       -o-transition: 0.2s;
}

.search-wrapper .search-input::-webkit-input-placeholder {
  color: #6c6c6c;
}

.search-wrapper .search-input::-moz-placeholder {
  color: #6c6c6c;
}

.search-wrapper .search-input:-moz-placeholder {
  color: #6c6c6c;
}

.search-wrapper .search-input:-ms-input-placeholder {
  color: #6c6c6c;
}

.search-wrapper input[type=checkbox]:checked ~ .search-input {
  left: 40px;
  width: 198px;
}

http://codepen.io/Heidel/pen/XJOOVv

@темы: Верстка, CSS, Обработка события click средствами CSS, Ссылки

Comments

[Гость]

Любовь к веб-сайту -- действительно пользователю дружелюбно и много, чтобы увидеть!

Посетите также мою страничку

gmcguire.digital.uic.edu/mediawiki/index.php?ti... как получать российскую пенсию

33490-+