Supprimer le cadre bleu autour du champ de recherche

Jul11

Octobre 2008

Bonjour,

Quand on clique dans le champ "Rechercher" pour y saisir un mot-clé, un cadre bleu apparaît autour du champ.
Question bête : comment fait-on pour l’enlever ?
J’ai bien réussi à changer la présentation du champ en jouant avec le css et le fichier "recherche.html" du dossier "formulaires", mais impossible de trouver ce que je dois modifier pour faire disparaître ce cadre...

Merci d’avance !

Par note Par date Par date chronologique

Indiquez l’intérêt que vous portez à cette réponse

0

Stanislas

Octobre 2008

Le comportement que tu décris est celui de ton site publique qui t’es propre. Cela n’a rien à voir avec spip, désolé, il faut que tu examines ton code html et css.
Indiquez l’intérêt que vous portez à cette réponse

0
Jul11

Octobre 2008
Merci Stanislas, mais ta réponse me laisse dubitatif. Je ne crois pas que quoi que ce soit dans mon code (css ci-dessous) appelle ce cadre bleu.
En fait je viens de me rendre compte qu’il n’apparaît que sous Safari (j’avais pas encore testé la page sous d’autres navigateurs au moment de mon post).
Sans doute un comportement propre au navigateur d’apple, donc pas très grave en définitive...
/* Formulaire de recherche */ #formrecherche { margin-top: -80px; margin-left: 660px; } #q{ padding-left: 18px; width: 89px; background-color: #FFFFFF; background-repeat: no-repeat; background-position: 0px center; border: 5px solid #99CC33; } #q:focus { background-color: #fff; background-repeat: no-repeat; background-position: 0px center; }
Indiquez l’intérêt que vous portez à cette réponse

0

tetue

Octobre 2008

Oui, enfin bon, quelques lignes de CSS sans le HTML correspondant, ça n’est pas très parlant. Donne-nous plutôt l’URL de la page web où voir cela.

Sinon, le focus de Safari est, contrairement à d’autres navigateurs, clairement marqué : ça fait un joli cadre, euh, gris.
Indiquez l’intérêt que vous portez à cette réponse

0

Jul11

Octobre 2008

C’est là : http://groupeverts.idoo.com
Indiquez l’intérêt que vous portez à cette réponse

0

tetue

Octobre 2008

Je ne constate pas de cadre bleu ni de d’autre fonctionnement anormal sur ton formulaire qui semble très bien :-)
Indiquez l’intérêt que vous portez à cette réponse

0

Jul11

Octobre 2008

!!!! C’est à n’y rien comprendre. Même en cliquant dans le formulaire ?
Tant pis, c’est pas très grave... En tous cas merci.
Indiquez l’intérêt que vous portez à cette réponse

0

denisb

Octobre 2008

c’est bien le comportement normal (par défaut) de safari d’entourer le champ qui a le focus d’un liseré gris.

pour modifier ce comportement (volonté ergonomique), il va falloir tripatouiller un peu de code css comme expliqué ici :
http://www.waytoocrowded.com/extras/safari/
regarde le code source, et inspire toi de son css (tu peux ne pas utiliser le javascript qui ne sert -pour ce qui est de ton souci- à rien).
Indiquez l’intérêt que vous portez à cette réponse

0

Jul11

Octobre 2008

Erreur 401, pas possible d’accéder à la page dont tu me donnes le lien.
Mais bon c’est pas bien grave, et si Safari est le seul navigateur à se comporter de la sorte, je crois que je vais pas insister...
Merci à tous pour votre aide !

denisb

Octobre 2008

allons bon...
en gros, c’est ça :

<style type="text/css">
input {
  border: 1px solid #333;
  width: 260px;
}
input:focus {
  border-color: #999;
}
div {
  position: relative;
  border: 1px solid #333;
  overflow: hidden;
  height: 1.6em;
  width: 260px;
  margin-bottom: 2em;
}
div input {
  position: absolute;
  left: -.2em;
  top: -.2em;
  padding: .4em;
  width: 264px;
}
/* Not for Safari */
html:lang(en)>body div input { left: -.4em;top: -.4em; }
*+html div input { left: -.4em;top: -.4em; }
* html div input { left: -.4em;top: -.4em; }
</style>

et ton html :

<form method="post" action="#">
  <div><input type="text" id="faked" name="faked" value="search" /></div>
</form>

explications du bidouillage ici :

http://www.waytoocrowded.com/2007/04/19/safari-input-border-control/

Indiquez l’intérêt que vous portez à cette réponse

0

Février 2016

supprimer
Indiquez l’intérêt que vous portez à cette réponse

0

alain gerbaud

Juin 2018

j’ai un cadre bleu lors de la saisie
Indiquez l’intérêt que vous portez à cette réponse

0

tetue

Juin 2018

Sinon, puisqu’il est ici question de la visibilité de la prise de focus, notez que c’est à préserver, pas à supprimer, parce que ça améliore la navigation :
http://romy.tetue.net/signaler-le-focus-ameliore-la-navigation
http://www.outlinenone.com