CSS form diagonally without bending the letter together

Asked

Viewed 505 times

2

Hello, I need to make a diagonal form. But the form letters get crooked together "search in store". Someone can solve this with CSS?

inserir a descrição da imagem aqui

HTML Used

<div id="search" class="col-xs-10 search search-form" style="padding-right: 0px;">
        <input class="form" type="search" placeholder="Buscar na loja" name="palavra_busca" style="padding-top: 0px; height: 37px;">     
</div>

CSS Second-hand

#search{
-moz-transform: skewX(-40deg);
-webkit-transform: skewX(-40deg);
-o-transform: skewX(-40deg);
-ms-transform: skewX(-40deg);
transform: skewX(-40deg);  
}
css

  • What I’ve seen about this is that you create a DIV with this formatting and the text inside you apply the rule over passing the negative values and right, now in a text input I don’t know if it will be possible, because this css property assigns the effect to the element as a whole.

  • related: Side-to-side Divs with triangular tip

2 answers

1


You have to do the same effect, but unlike in the field inside. To make it straight.

#search{
-moz-transform: skewX(-40deg);
-webkit-transform: skewX(-40deg);
-o-transform: skewX(-40deg);
-ms-transform: skewX(-40deg);
transform: skewX(-40deg);  
}

#search input{
-moz-transform: skewX(40deg);
-webkit-transform: skewX(40deg);
-o-transform: skewX(40deg);
-ms-transform: skewX(40deg);
transform: skewX(40deg);  
}

  • Missing background-color: white in #search

0

What you can do is give an id or a class to the text and modify according to what you need. That’s all that’s missing. With the form class modifies the font. I think this is what you need.

Any questions, I’ll help .

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.