Problème apparence barre de recherche

[ju012345]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous!
Je vous sollicite aujourd'hui, car je souhaite ajouter une barre de recherche instantanée sur mon forum, mais je n'arrive pas à bien personnaliser son apparence.
Vous trouverez ci-dessous le rendu actuel (en haut de l'image), et ce que je souhaite faire (en bas).

1 - Je n'arrive pas à supprimer un trait de couleur gris qui change de couleur et devient bleu au passage de la souris (surement dans le style par défaut du forum).
2- En mettant un peu de transparence sur le fond (car je ne souhaite voir l'image d'arrière plan), cela me grise mon texte et il n'est plus bien visible, est-il possible de forcer du noir?
3 - Je souhaite mettre une loupe sur le côté droit avec un fond de couleur mais je n'y arrive pas.



Voila maintenant les codes que j'ai utilisé:
Sur le template haut de page pour créer le champ recherche:

Code:

           <div class="rechercheaccueil">
                          <form action="/search" method="get">
      <div class="input-wrap" >
         <input type="text" class="inputboxaccueil" name="search_keywords" size="24" placeholder="  Rechercher des reportages" style="height=30px"/>
         <button type="submit" class="ion-android-search"></button>
                          
                             </div>

   </form>
                     </div>
         </div>

Et sur mon CSS, je pense que c'est là que ca ne va pas:

Code:

.rechercheaccueil {
width: 80% !important;
max-width: 500px !important;
  height: 35px;
  margin: auto;
  border: 0px solid #3E464C;
  border-radius: 8px;
  padding-bottom: -5px;
  text-color: black !important;
  background-color: rgba(255, 255, 255, .5);
  background-repeat: no-repeat;
  background-position: 2%;
}

Merci d'avance pour votre réponse!
A+

[Self]

Hey !

est-ce que le résultat vous va si vous remplacez votre html par :

Code:

<div class="rechercheaccueil">
   <form action="/search" method="get">
      <div class="input-wrap" >
         <input type="text" id="inputboxaccueil" name="search_keywords" size="24" placeholder="Rechercher des reportages" />
         <button type="submit" class="ion-android-search"></button>
      </div>
   </form>
</div>

Et votre CSS par ceci :

Code:

#inputboxaccueil {
   display: inline-block;
   width: 80%;
   max-width: 420px;
   height: 37px;
   margin: auto;
   border: 1px solid #3E464C;
   border-radius: 22px;
   padding: 0 38px 0 12px;
   color: #000;
   background-color: rgba(255, 255, 255, .5);
}

.rechercheaccueil .ion-android-search {
   display: inline-block;
   position: relative;
   left: -57px; top: 2.5px;
   margin-left: 0;
   background-color: orangered;
   height: 30px;
   width: 50px;
   border-radius: 16px;
   border: 0;
   color: white;
}

J'ai travailler sur l'input plutôt que sur la div qui l'entoure et j'ai ajouté un id à l'input ce qui permet de donner une importance plus grande aux règles CSS attachées à cet input qu'aux règles générales données dans le template de votre forum. Et j'ai essayé de me rapprocher au mieux de l'image que vous avez fournie.

[ju012345]

Bonsoir!
Super, c'est génial ça fonctionne très bien, je vois pouvoir continuer mon développement!
Un grand merci pour votre aide et pour votre réactivité!
Bonne soirée