Discussion :

[bdxproo]

je suis enclein a ouvrir un forum sur une barre de rechErche de moteur de recherche
PS le code m appatient sur codepen: Smple Search Bar - SearchEngine-portail-barre de recherche compatible
https://codepen.io/huange/pen/bGqMqM |
il est en free gratuiciel sur le W3S | il est porter sur WIN 10 11 et compatble tous navigateur

ondiscute un peu du code si vous voulez j en aimerai finalLement une discussion ouverte avec les users du forums
de pseudo : BDXPRO

[Doksuri]

c'est joli, mais c'est dommage d'avoir utilise une font juste pour la loupe, alors qu'un minuscule svg suffirait, tu te traines une dependance inutilement

[casperweb]

Bonjour,
Pour un champ de recherche il existe le type search
https://developer.mozilla.org/fr/doc...s/input/search
Règle n° 95 - Les champs de saisie de type mail, URL, téléphone, nombre, recherche, mots de passe, heure et date sont dotés du type approprié

Ne désactiver pas le outline!!! Penser à ceux qui utilise le clavier et pas la souris.
Règle n° 165 - Le focus clavier n'est ni supprimé ni masqué.

Dans le code proposé, il manque les balises <form> et </form>

[NoSmoking]

Bonjour,

c'est dommage d'avoir utilise une font juste pour la loupe,

c'est vrai mais cette fonte peut éventuellement servir ailleurs dans la page.

On peut également le faire sur base d'ASCII : \1F50D\FE0E, quelque chose comme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
.search {
  --size: 2em;
  display: flex;
  position: relative;
  width: 100%;
  height: var(--size);
 
  .search-input {
    border: 1px solid #2196F3;
    border-right: none;
    border-radius: 5px 0 0 5px;
    font: inherit;
  }
 
  .search-btn {
    width: var(--size);
    border: 1px solid #2196F3;
    border-radius: 0 5px 5px 0;
    text-align: center;
    font: inherit;
    font-weight: 700;
    color: #FFF;
    background: #2196F3;
    cursor: pointer;
    
    &:before {
      content: "\1F50D\FE0E";
      font-size: 1.25em;
    }
  }
}
</style>
<div class="search">
  <input type="search" class="search-input" name="q" placeholder="Votre recherche">
  <button type="submit" class="search-btn"></button>
</div>

Pour un champ de recherche il existe le type search

Effectivement et ce qui est remarquable est qu'Opquast n'applique pas les règles qu'il dictent à ses pages

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" id="typesense-search-input" placeholder="Chercher dans Opquast" class="c-search-input">

[bdxproo]

il existe une adapation cree en 2020-23 toujours une version de CodePen Intituler : simple-menu-bar | Version .nav JS
elle n est proprement dit et faite avec le RSQD.html MAIS une adapation voici le lien https://codepen.io/druArt/pen/VbVjxx

il s agit de la barre faite a gauche d une gabel comme Windows autrement dit Menu statu Barre
le code est un peu compliquer | Y a t il a discuter comme Win95 98 saviez vous qu est une gabel windows
On regarde u peu ca et je crois qu il y ai des Icones et program named c est du uniquement JS HTML CCS une adaptation
A+ GUILLAUME BIDOUX | PSEUDO BDXPRO

[NoSmoking]

il est où le rapport avec la discussion ouverte ?