как кликнуть значок поиска в поле ввода формы с помощью CSS

Question

как кликнуть значок поиска в поле ввода формы с помощью CSS

У вас есть несколько вариантов:

process.stdout.write('hmm: ')
console.dir(x)

Другое ...

var util = require('util')
process.stdout.write('hmm: ')
console.log(util.inspect(x, true, 10, true))

Дополнительную информацию см. в util.inspect docs.

Редактировать: Извините, мой ум думал, что я читаю Node.js. Это справедливо только для Node.js. Итак, я оставлю его для любого Googlers.

Edit2: Я не сумасшедший, мне просто нужно спать. Вы записали Node.js. Я собираюсь добавить его как тег.

2

php html css wordpress search

задан Aniket G 25 February 2019 в 04:31

3 ответа

score 0 · Answer 1

С помощью Шрифт Высокий значок поиска , как показано ниже:

#searchform {
  position: relative;
}

#submit {
  position: absolute;
  background: #387DD8;
  padding: 10px;
  color: #fff;
  width: 60px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<form role="search" method="get" id="searchform" class="searchform" action="http://">
  <input type="search" id="s" name="s" value="" placeholder="Enter a product name" title="Press enter to search" />
  <button type="submit" id="submit">
    <i class="fas fa-search"></i>
  </button>
</form>

score 0 · Answer 2

Вам нужно поле для отправки, чтобы отправить запрос на получение.

 <form role="search" method="get" id="searchform" class="searchform" action="http://">
     <input type="search" id="s" name="s" value="" placeholder="Enter a product name" title="Press enter to search">
     <input type="submit" id"submit">
 </form>

Затем можно применить стиль к #submit вместо #searchform:before

.

score 0 · Answer 3

* {
    box-sizing: border-box;
    font-family: inherit;
}

html {
    font-size: 62.25%;
}

body {
    font-family: sans-serif;
    font-size: 1.6rem;
}

#searchform {
 position: relative;
 width: 500px;
 display: flex;
 justify-content: center;
 align-items: center;
}

#s {
    width: 90%;
    height: 100%;
    padding: .8rem;
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem;
    border: 1px solid dodgerblue;
    border-right-color: transparent; 
}

#submit {
    width: 10%;
    height: 100%;
    padding: .8rem;
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
    border: 0px;
    background: dodgerblue;
}

<form role="search" method="get" id="searchform" class="searchform" action="http://">
        <input type="search" id="s" name="s" value="" placeholder="Enter a product name" title="Press enter to search">
        <input type="submit" id="submit" value="


                  
                     
                     0

                  
                  
                  
                     ответ дан Gaurav Bhardwaj                     25 February 2019 в 04:31 
                  
                  поделиться

как кликнуть значок поиска в поле ввода формы с помощью CSS

3 ответа

Похожие вопросы: