.recherche{
    border-radius: 30px;
    background-color: #F2F2F2;
    
}

.icone{
    width: 1%;
}

.search{
    width: 16%;
    font-size: large;
    border: none;
}

.submit{
    color: white;
    border: none;
    background-color: #0065FC;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    padding-top: 2%;
    padding-bottom: 2%;
    font-size: large;
}

.submit:hover{
    background-color: #DEEBFF;
    background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
    z-index: -1;
    transition: height .25s cubic-bezier(.6,0,.4,1);
    
}

<div class="recherche">

        <img class="icone" src="Images Booki/logo/localisation.svg" alt="localisation"/>

        <input class="search" type="text" name="search" placeholder="Marseille, France">

        <button class="submit" type="submit">Rechercher</button> 
        
        </div>

Je dois faire comme sur l'image. J'ai mis une div pour englober les trois elements. Et j'ai mis un backround color sauf que le résultat n'est pas du tout pertinent. Et -il possible d'avoir des indices ou une piste pour arriver à ce résultat la?

Bonjour,

première chose, évite les pourcentages, surtout pour les valeurs top et bottom, car tu ne sais pas à l'avance la taille de tes conteneurs. (et les largeurs en pourcentages, aussi, surtout pour les éléments dont tu connais la taille, comme ton icône)

Tu peux par exemple utiliser des valeurs en px, et pour l'input du milieu, lui mettre un padding de la valeur moins 1px, pour émuler une bordure en haut et en bas.

Ensuite, pour te débarrasser des espaces entre les éléments (qui sont dus aux espaces et tabulations dans le html), tu peux mettre display: inline-flex sur .recherche ; mais cela implique un flex: 1 sur les enfants sauf l'icône. Tu peux faire

.recherche > * {
  flex: 1;
}

.icone {
  flex-grow: 0;
}

par exemple.

merci beaucoup, c'est deja mieux, j'ai quelque choses a modifier mais l'idee est la!

merci beaucoup!