rtl move search box to be in right side of the search button

[davsevParticipant]

Hey,
I have the search box in the image.
I have a few issues:
1. How do I move the button to the left and move the input to the right?
Tried a few css ways but without success.
2. How do I change the font family in the placeholder?

Thank you
David

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

1. With this option here: https://i.imgur.com/Qav1yfS.png
If that does not work, then this custom CSS will do the trick:

.probox .promagnifier {
    order: 1 !important;
    -webkit-order: 1 !important;
}

2. Here: https://i.imgur.com/QBCISe8.png
If you want a very specific font, then with this CSS you can force it:

.proinput input {
    font-family: inherit !important;
    font-size: 18px !important;
}

I hope this helps!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[davsevParticipant]

Thank you for your fast answer.
1. I meant to move the entire button to the left.
This is what I did:

.probox{
display: flex !important;
flex-direction: row-reverse !important;
}

2. Your result changes the input font but not the placeholder font.
How do I change the placeholder font?

[Ernest MarcinkoKeymaster]

Hi!

2. For placeholder, I believe separated rules may be required:

.probox input::-webkit-input-placeholder {
  // same rules here
}

.probox input.orig::-moz-placeholderr {
  // same rules here
}

.probox input:-ms-input-placeholder {
  // same rules here
}

It has to be 3 separate rules, otherwise browsers may not recongize them.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts