如何圍繞多個元素制作適當的邊框

Question

我還在嘗試學習 html/css 和 flex box。 我目前正在研究一個搜索欄，我想在兩個圖標和一個占位符上添加一個邊框。 但是，我實際上只能在這些元素周圍單獨放置一個邊框或放置到盒子上，這與我想要做的相比太大了。 有人可以幫我嗎？

 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 class="rechercheBar"> <div class="buttonLocalisationIcon"> <i class="fa-solid fa-location-dot"></i> </div> <input class="searchBar" type="search" placeholder="Marseille, France"> <div class="buttonResearch">Rechercher</div> </div> <div class="rechercheBarMobile"> <div class="buttonLocalisationIcon"> <i class="fa-solid fa-location-dot"></i> </div> <input class="searchBarMobile" type="search" placeholder="Marseille, France"> <div class="buttonMagnifyingGlass"> <i class="fa-solid fa-magnifying-glass"></i> </div> </div>

Answer 1

您已經使用了border-radius屬性，您只需要定義實際的border屬性。 我以速記的方式做到了，但這里是屬性本身的細分： https ://developer.mozilla.org/en-US/docs/Web/CSS/border 值得注意的是，邊框屬性有很多自定義選項和文章中還有對邊框與輪廓的解釋，以防您決定使用輪廓代替。

 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 class="rechercheBar"> <div class="buttonLocalisationIcon"> <i class="fa-solid fa-location-dot"></i> </div> <input class="searchBar" type="search" placeholder="Marseille, France"> <div class="buttonResearch">Rechercher</div> </div> <div class="rechercheBarMobile"> <div class="buttonLocalisationIcon"> <i class="fa-solid fa-location-dot"></i> </div> <input class="searchBarMobile" type="search" placeholder="Marseille, France"> <div class="buttonMagnifyingGlass"> <i class="fa-solid fa-magnifying-glass"></i> </div> </div>

Answer 2

對於圖標邊框，您可以使用border: 1px solid black; 對於占位符邊框，您可以使用::-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 class="rechercheBar"> <div class="buttonLocalisationIcon"> <i class="fa-solid fa-location-dot"></i> </div> <input class="searchBar" type="search" placeholder="Marseille, France"> <div class="buttonResearch">Rechercher</div> </div> <div class="rechercheBarMobile"> <div class="buttonLocalisationIcon"> <i class="fa-solid fa-location-dot"></i> </div> <input class="searchBarMobile" type="search" placeholder="Marseille, France"> <div class="buttonMagnifyingGlass"> <i class="fa-solid fa-magnifying-glass"></i> </div> </div>

Answer 3

謝謝你的回答。 這是我最后所做的：

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;

}