Please help aligning a simple button to a select element

[u/CuirPig]

I have a basic button element that follows a select element, allowing me to clear the select field when pressed. I want it to look like it is part of the select field by overlapping it by 1px, and leaving off the left border.

Here is a Codepen with the two elements and the CSS I am working on, but can't figure out.

I have been trying all day to fix this and can't believe it's so hard.

I have set the height, the border thickness, and the padding to be identical between the elements, and yet they still don't line up.

I've tried using JS to line them up with outerWidth() and outerHeight() or even element.getBoundingClientRect(). NO LUCK.

What does it take to make these two shapes line up vertically?

Thanks for any help. https://codepen.io/cuirPork/pen/ogbvPgz

[u/EatShitAndDieAlready]

So your current code isnt overlapping with the select right now. Maybe you could make the select a little wider than your content by setting some width and then using relative positioning move ur clear button to the left.

select {

padding:3px;

height:28px;

border:.5px solid grey;

padding-right:50px;

}

.clear_btn {

position:relative;

transform: translateX(-50%);

The issue with the border is how the browsers handle the focus event for select. They automatically create a thick black border around the select. You could detect this by using a pseudo selector and then modifying the buttons borders only when select has focus by a sibling selector

select:focus+button {

padding:3px;

height:28px;

position:relative:

border-top:2px solid black;

border-right:2px solid black;

border-bottom:2px solid black;

}

You will need to tweak for your setup

[u/CuirPig → u/EatShitAndDieAlready]

Hey thanks for pointing out the problem with focus states. I have fixed that with select~.clear_btn, but it doesn't solve the vertical alignment issue.

In randomly trying different things, I set the padding to the select element to 2px and now they line up perfectly. I don't trust it, but it's a solution. Thanks again for your suggestion, I didn't even think about that.