How to force border on the left-hand side without moving input cell at the next row?

HTML & CSS
1

I like to eliminate block element when using input cell. An example: when I try to add left border it should be see on he left-hand side also a border.
How to force border on the left-hand side without moving input cell at the next row? Input cell will be under border on the left-hand side.

<form action="" class="mycontainer2"><input type="text" class="" placeholder="Search and find</form>

#mycontainer2::before {
    content: "";
    border-left: 1px solid #000;
}
2

It’s a little hard to understand what the issue is. All I see in your code is an input with an extra line to the left.

Here’s a slightly tidier version of your code:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style media="all">

.mycontainer2::before {
    content: "";
    border-left: 1px solid #000;
}

</style></head><body>

<form action="" class="mycontainer2"><input type="text" class="" placeholder="Search and find"></form>

</body></html>
1 Like
3

What is the difference. I have an issue as there is element:

 content: "";

If I remove it it will be correct position but without I.
If I add it it will be pushed down but I will work.

4

I’m still not sure what you want to happen. This is what I see if I put your code into codepen (and change the selector so it actually works).

image

If I thicken it and add a margin to differentiate it…
image

What EXACTLY are you looking for? Do you just want a thicker left border on the input box?
image

2 Likes
5

Your example is working but I need to test using my CSS.