Re: Dawn Theme | txt inside input box RTL
hello everyone,
i would like your assistance moving all the text inside my input text boxes from left to right :
to right to left.
link to website :
Hey @ChicBotique1,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
label.field__label {
left: auto !important;
right: 15px !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Hello @ChicBotique1
Welcome to Shopify Community,
Please use below CSS:
.field__input, .select__select, .customer .field input, .customer select {
text-align: right !important;
}
.field__label, .customer .field label {
left: auto !important;
right: calc(var(--inputs-border-width) + 2rem);
}
.field__input:focus~.field__label, .field__input:not(:placeholder-shown)~.field__label, .field__input:-webkit-autofill~.field__label, .customer .field input:focus~label, .customer .field input:not(:placeholder-shown)~label, .customer .field input:-webkit-autofill~label {
right: calc(var(--inputs-border-width) + 2rem);
left: auto !important;
}
OUTPUT:
Thanks
Hey @ChicBotique1,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
label.field__label {
left: auto !important;
right: 15px !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
@ThePrimeWeb thank you very much brother,
you have any idea what it doesn't apply on the checkout page?
Hello @ChicBotique1
Welcome to Shopify Community,
Please use below CSS:
.field__input, .select__select, .customer .field input, .customer select {
text-align: right !important;
}
.field__label, .customer .field label {
left: auto !important;
right: calc(var(--inputs-border-width) + 2rem);
}
.field__input:focus~.field__label, .field__input:not(:placeholder-shown)~.field__label, .field__input:-webkit-autofill~.field__label, .customer .field input:focus~label, .customer .field input:not(:placeholder-shown)~label, .customer .field input:-webkit-autofill~label {
right: calc(var(--inputs-border-width) + 2rem);
left: auto !important;
}
OUTPUT:
Thanks
What do you mean by professional? It's all upto preference. It's the same thing as driving a red car or a blue car. Nothing is more professional than the other, it's just your preference.
If you want my code in base.css then remove the style tags and paste it there.
Community Blog Articles
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024
Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024