@zlowar

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

Как должно быть 3035a481f20c48ad86c1366611f1a13e.jpg
Получается 399ff186973f42f4a1f27e90712d0879.jpg
<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 должен быть ровным, помогите пожалуйста!
  • Вопрос задан
  • 3380 просмотров
Решения вопроса 1
KorsaR-ZN
@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>


f0f626f95cd94f8c9bbb61dca815dddc.png

Ну пример ясен, там сделаете более красивее, как вам надо, ну чтоб текст не прилипал к скосам и т.д :)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы