enter image description here

How to make a transparent search form and such a button next to it?

/*Search form*/ .search img{ position: relative; top: 4px; } .search-form { display: inline-block; position: relative; } .search-form-input { max-width: 200px; height: 35px; line-height: 28px; margin: 0; padding: 0 38px 0 10px; border: 1px solid #d5d5d5; border-radius: 0; background-color: white; box-sizing: border-box; font-family: Tahoma, sans-serif; font-size: 13px; } .search-form-btn { position: absolute; right: 2px; top: 2px; width: 28px; height: 28px; line-height: 28px; /* Просто тюнинг внешнего вида */ color: #666; font-weight: bold; margin: 0; padding: 0; border: 0; border-radius: 0; background-color: transparent; text-align: center; cursor: pointer; } /*and search form*/ 
  <form action="#" class="search-form"> <input type="search" class="search-form-input" placeholder="Subscribe our newsletter" /> <button type="submit" class="search-form-btn"> <img src="img/Search%201.png" alt=""> </button> </form>

    1 answer 1

    put the background: transparent; If you want the button to be outside the frame, use the border not on the form but on the input

     body{ background-color: blue; } /*Search form*/ .search img { position: relative; top: 4px; } .search-form { display: inline-block; position: relative; } .search-form-input { max-width: 200px; height: 35px; line-height: 28px; margin: 0; padding: 0 38px 0 10px; border: 1px solid #d5d5d5; border-radius: 0; /*background-color: white;*/ background: transparent; box-sizing: border-box; font-family: Tahoma, sans-serif; font-size: 13px; } .search-form-btn { position: absolute; right: 2px; top: 2px; width: 28px; height: 30px; line-height: 28px; /* Просто тюнинг внешнего вида */ color: #666; font-weight: bold; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba( 255, 255, 255, 0.4); text-align: center; cursor: pointer; } button img{ width: 30px; height: 100%; } /*and search form*/ 
     <body> <form action="#" class="search-form"> <input type="search" class="search-form-input" placeholder="Subscribe our newsletter" /> <button type="submit" class="search-form-btn"> <img src="http://www.freeiconspng.com/uploads/blue-arrow-png-22.png" alt=""> </button> </form> </body>

    Option 2, cleaned:

     body { background: url("https://3dnews.ru/assets/external/illustrations/2015/06/17/915789/kb4.jpg") 100% 100% no-repeat; background-position: center center; background-size: cover; } * { box-sizing: padding-box; } .search-form-input { max-width: 200px; height: 35px; margin-right: 5px; padding: 0 1rem; border: 1px solid #d5d5d5; background: transparent; font-family: Tahoma, sans-serif; font-size: 13px; } .search-form-btn { vertical-align: bottom; width: 35px; height: 35px; margin: 0px; padding: 0px; background: rgba( 255, 255, 255, .25); cursor: pointer; } 
     <body> <form action="#" class="search-form"> <input type="search" class="search-form-input" placeholder="Subscribe our newsletter" /> <input type="image" class="search-form-btn" src="http://www.freeiconspng.com/uploads/blue-arrow-png-22.png" border="0" alt="Submit" /> </form> </body>

    • and where is the button ???? - Air
    • Now add. - Ruslan Semenov
    • @Ruslan Semenov Wow, thank you, can you tell me how to move the button for the search form block, as in the screenshot and what would it work? - BraFik
    • Added option 2, there is a little easier and as you need, removed too much, in general, you can still clean, but your task is completed. Replaced the button button with the input type="image" which will work as a submit - Ruslan Semenov
    • @Ruslan Semenov Aha thank you very much - BraFik