How to generate separators between buttons inside a search box in CSS

I have a input search box which has two buttons on the right end of the search box. In future I would be adding more buttons on the right. So I am thinking of auto generating the button separators whenever a button has another button on its right side. Is this possible to be done only with CSS?

Currently I am only generating the button separator as a small little pip between two buttons using the following css rules. But this is specific to the RESET button only. I have another button named "search button" next to the reset button. Now if I add a new button name "Image button", I need to have a separator auto generated. I didn't want to have a separate div for the separators. Is it possible?

div

.search-field__reset-button::after position: absolute; right: 0; height: 1.5rem; content: ''; border-right: 1rem solid black;

give them all a common class and then use last child to remove the border of the last button or leave that class off the last button

– Pete
Sep 13 '18 at 9:27

@Pete solid, simple and clean. OP please do this! Please consider forming an answer with that solution

– user10004359
Sep 13 '18 at 10:12

1 Answer
1

button color:red; button + button margin-left:20px;

try this

this will work when you will have button after button

– midnightgamer
Sep 13 '18 at 10:09

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

– Clijsters
Sep 13 '18 at 11:50

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Dfyjkt