How to change color of the Track Order input box and "TRACK" button

Shopify Discussion
1

I’m using the Debutify theme.

How to change the color of the input box and “TRACK” button from the light purple to another color and add a border on the edges of the boxes? The way it is now, the border shows when the mouse pointer is hovered over and turns the darker purple. I want a lighter blue instead of the purple to match my theme .

Thank you in advance.

trackyourorderpurple.jpg
trackyourorderpurple.jpg623×235 7.83 KB

2

Hi @jbslide

Can you kindly share your store link with us? We will help you check it and suggest you a solution.

3

Hey @jbslide ,

Please add the following CSS to the theme editor > theme settings > custom style/script > custom style

/* Change input colors */
#ot-num{
    background-color: yellow;
    border-color: yellow;
}

/* Change placeholder color */
#ot-num::placeholder{
    color: green!important;
}

/* Change hover colors */
#ot-num:not(.disabled):not([disabled]):hover, 
#ot-num:not(.disabled):not([disabled]):focus{
color: #444;
    background-color: blue;
    border-color: blue;
    box-shadow: 0 0 0 0.2rem blue;
    color: white;
}

The following code will change the colors of the button.

#ot-btn{
background-color:red;
border-color:red;
color:white;
}

#ot-btn:not(.disabled):not([disabled]):hover{
box-shadow: 0 0 0 0.2rem red;
}

Change the colors to the desired color and save. These changes will apply only to the order tracking page.