I still trying to learn html/css and flex box. I currently workiong on a search bar and I want to add a boder arond two icon and a placeholder. However, I'm actually just able to place a boder aroud thoses elements separatly or to the box, that is to large from what I whant do. Can someone plese help me ?
div.rechercheBar {
background-color: red;
display: flex;
border: 0.5px solid blueviolet;
}
div.rechercheBarMobile {
display: none;
}
div.buttonLocalisationIcon {
background-color: lightgrey;
display: flex;
width: 50px;
height: 50px;
border-radius: 10px 0px 0px 10px;
align-items: center;
display: flex;
align-items: center;
justify-content: center;
}
input.searchBar {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border: none;
padding: 20px;
}
div.buttonResearch {
width: 150px;
height: 50px;
background-color: #0065FC;
color: #DEEBFF;
border-radius: 0px 10px 10px 0px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
div.buttonResearch:hover {
background-color: #DEEBFF;
color: #0065FC;
border-radius: 10px;
}
/*Format mobile*/
div.rechercheBar {
display: none;
}
div.rechercheBarMobile {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border: 0.5px solid pink;
/*Erreur ICI: met la bordure trop grande*/
}
div.buttonMagnifyingGlass {
width: 10%;
height: 50px;
background-color: #0065FC;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 10px;
}
input.searchBarMobile {
width: 70%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border: none;
padding: 20px;
}
div.buttonMagnifyingGlass:hover {
height: 50px;
background-color: red;
color: #0065FC;
border-radius: 10px;
}
<div >
<div >
<i ></i>
</div>
<input type="search" placeholder="Marseille, France">
<div >Rechercher</div>
</div>
<div >
<div >
<i ></i>
</div>
<input type="search" placeholder="Marseille, France">
<div >
<i ></i>
</div>
</div>
CodePudding user response:
You're already part of the way there with the border-radius
attribute, you just need to define the actual border
attribute. I did it the shorthand way but here's a breakdown of the attribute itself: https://developer.mozilla.org/en-US/docs/Web/CSS/border Worth noting that the border attribute has quite a bit of customization options and there's also an explanation of border versus outline in the article just in case you ever decide to use an outline for something instead.
div.rechercheBar {
background-color: red;
display: flex;
border: 0.5px solid blueviolet;
}
div.rechercheBarMobile {
display: none;
}
div.buttonLocalisationIcon {
background-color: lightgrey;
display: flex;
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 10px 0px 0px 10px;
align-items: center;
justify-content: center;
}
input.searchBar {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border: none;
padding: 20px;
}
div.buttonResearch {
width: 150px;
height: 50px;
background-color: #0065FC;
color: #DEEBFF;
border-radius: 0px 10px 10px 0px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
div.buttonResearch:hover {
background-color: #DEEBFF;
color: #0065FC;
border-radius: 10px;
}
/*Format mobile*/
div.rechercheBar {
display: none;
}
div.rechercheBarMobile {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border: 0.5px solid pink;
/*Erreur ICI: met la bordure trop grande*/
}
div.buttonMagnifyingGlass {
width: 10%;
height: 50px;
background-color: #0065FC;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid black;
border-radius: 10px;
}
input.searchBarMobile {
width: 70%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border: none;
padding: 20px;
}
div.buttonMagnifyingGlass:hover {
height: 50px;
background-color: red;
color: #0065FC;
border-radius: 10px;
}
<div >
<div >
<i ></i>
</div>
<input type="search" placeholder="Marseille, France">
<div >Rechercher</div>
</div>
<div >
<div >
<i ></i>
</div>
<input type="search" placeholder="Marseille, France">
<div >
<i ></i>
</div>
</div>
CodePudding user response:
For icons border you can use border: 1px solid black;
and for placeholder border you can use ::-webkit-input-placeholder
div.rechercheBar {
background-color: red;
display: flex;
border: 0.5px solid blueviolet;
}
div.rechercheBarMobile {
display: none;
}
div.buttonLocalisationIcon {
background-color: lightgrey;
display: flex;
width: 50px;
height: 50px;
border-radius: 10px 0px 0px 10px;
align-items: center;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
}
input.searchBar {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border: none;
padding: 20px;
}
div.buttonResearch {
width: 150px;
height: 50px;
background-color: #0065FC;
color: #DEEBFF;
border-radius: 0px 10px 10px 0px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
div.buttonResearch:hover {
background-color: #DEEBFF;
color: #0065FC;
border-radius: 10px;
}
/*Format mobile*/
div.rechercheBar {
display: none;
}
div.rechercheBarMobile {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border: 0.5px solid pink;
/*Erreur ICI: met la bordure trop grande*/
}
div.buttonMagnifyingGlass {
width: 10%;
height: 50px;
background-color: #0065FC;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 10px;
border: 1px solid black;
}
input.searchBarMobile {
width: 70%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border: none;
padding: 20px;
}
div.buttonMagnifyingGlass:hover {
height: 50px;
background-color: red;
color: #0065FC;
border-radius: 10px;
}
.searchBarMobile::-webkit-input-placeholder {
border-style:solid;
border-width:thin 1px ;
}
.searchBarMobile:-moz-placeholder {
border-style:solid;
border-width:thin 1px;
}
.searchBarMobile:-ms-input-placeholder {
border-style:solid;
border-width:thin 1px;
}
<div >
<div >
<i ></i>
</div>
<input type="search" placeholder="Marseille, France">
<div >Rechercher</div>
</div>
<div >
<div >
<i ></i>
</div>
<input type="search" placeholder="Marseille, France">
<div >
<i ></i>
</div>
</div>
CodePudding user response:
Thanks you for your answer. Here what I did finally:
div.buttonLocalisationIcon {
background-color: lightgrey;
display: flex;
width: 7%;
height: 50px;
border-radius: 10px 0px 0px 10px;
align-items: center;
display: flex;
align-items: center;
justify-content: center;
border-top: 0.5px solid lightslategray;
border-bottom: 0.5px solid lightslategray;
border-left: 0.5px solid lightslategray;
}
input.searchBar{
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border: none;
padding: 20px;
border-top: 0.5px solid lightslategray;
border-bottom: 0.5px solid lightslategray;
}
div.buttonResearch {
width: 150px;
height: 50px;
background-color: #0065FC;
color: #DEEBFF;
border-radius: 0px 10px 10px 0px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-top: 0.5px solid lightslategray;
border-bottom: 0.5px solid lightslategray;
border-right: 0.5px solid lightslategray;
}