CODEWITHSUNDEEP
javascriptjqueryhtmlcss
benikens
benikens

Reputation: 163

input box moving when selected

I have a search field at the top of my site that when your selected it jumps up abit out of position and when you click out of the box so it's not selected but not close it the search field is aligned correctly. I can't figure out what is going on to make it move while the cursor is in the input field.

https://www.argentscientific.com

Click the link then click the search icon on the right side of the top level menu and you will see the problem. Rather confused about this one.

Upvotes: 0

Views: 842

Answers (1)

Vincent1989
Vincent1989

Reputation: 1657

This is because of :focus is not being included. When you select the search input, :focus is triggered but there is an existing css that overwrite your css, to fix this you need to explicitly include :focus into your css to prevent it being overwritten. Try changing below css from

.aws-container .aws-search-field{
    width: 100%;
    color: #313131;
    padding: 6px;
    line-height: 30px;
    display: block;
    font-size: 12px;
    position: relative;
    z-index: 2;
    background: rgb(247, 247, 247);
    -webkit-appearance: none;
}

to

.aws-container .aws-search-field, .aws-container .aws-search-field:focus {
    width: 100%;
    color: #313131;
    padding: 6px;
    line-height: 30px;
    display: block;
    font-size: 12px;
    position: relative;
    z-index: 2;
    background: rgb(247, 247, 247);
    -webkit-appearance: none;
}

Upvotes: 1

Related Questions