Как убрать transform для текста внутри input ?

Question

[zlowar]

Как должно быть
Получается

<div class="search__input__wrap">
             <input placeholder='поиск по сайту' type="text" class="search__input">
  </div

>

.search__input__wrap{
  transform: skew(45deg);
  width: 158px;
	height: 21px;
	margin-left: 460px;
	position: absolute;
	top: 7px;
}
.search__input {
  transform: skew(-45deg);
}

То есть текст внутри input должен быть ровным, помогите пожалуйста!

Answer 1

[KorsaR-ZN]

По другому сделать надо, вынесите input за обертку с трансформацией, т.к трансформация наклоняет весь элемент с его содержимым.

Рабочий пример:

.search__input__wrap
{
   position: relative;
}
.search-wrapper-skew
{
   width: 158px;
   height: 21px;
   transform: skew(45deg);
   background: #fff;
}
.search__input__wrap input
{
   border: 0;
   width: 135px;
   height: 21px;

   position: absolute;
   top: 0;
   left: 11px;
}

<div class="search__input__wrap">
   <div class="search-wrapper-skew"></div>
   <input placeholder="поиск по сайту">
</div>

Ну пример ясен, там сделаете более красивее, как вам надо, ну чтоб текст не прилипал к скосам и т.д :)

Comments

[zlowar]

Спасибо за ответ!

Answer 2

[_ _]

codepen.io/anon/pen/CHbsy

Comments

[zlowar]

Спасибо за ответ!