Re: How to make text inside a textbox a different color

How to make text inside a textbox a different color

astrofinityligh
Excursionist
53 2 2

Hi, 

 

if you scroll to the bottom of my page where newsletter is, you see that the "YOUR EMAIL" text is in black. However, if you type on it, it is white. how do i also make that black?

 

i want that option for ALL textboxes requiring text on my site, i can be more specific if someone responds. 

 

website www.astrofinitylights.com

Replies 15 (15)

knushus
Tourist
13 0 1

Its black when I type on my phone..

knushus
Tourist
13 0 1

Scratch that, you have multiple input fields, the other one is white. I will send you the code in 15 min

knushus
Tourist
13 0 1

1. Go to Edit code

2. Open base.css

3. Add this code in it, all the way on the bottom, leaving all the other code intact:

 

input[type=text] {
color: #000 !important;

}

 

4. Save base.css

 

5. Reload site, see if it works.

astrofinityligh
Excursionist
53 2 2

It worked for some of the boxes, not all. Could you do me a huge favor and answer another major problem i have? I will accept your solution 2x... I have a checkout button that is not working. I might have screwed my code up... Is there any way you could help and see if theres an error with something i coded and added?

knushus
Tourist
13 0 1

Which box doesn't work? 

I would suggest using the history option link in the theme, it is located next to each file name and it is a link called "Older versions".

astrofinityligh
Excursionist
53 2 2

Its for the checkout button. Like the worst possible thing ever. If you add something to your cart on my website and hit checkout it doesnt let you. I would assume if its a coding issue which it should be, I would need to just put the OLD code back. is that what you are saying?

knushus
Tourist
13 0 1

Yes thats the safest option.  Another thing you can do, is check the code from another theme and copy & paste it. If you do Edit code, you see the files that you changed with a blue dot next to it, so it must be one of those files. Did you find the Older versions option?

astrofinityligh
Excursionist
53 2 2

Yea, I found older versions of it. Which file should i try and put back to normal?

knushus
Tourist
13 0 1

I think it should be the product page because thats where the Add to cart button is. I think its main-product.liquid file (found in ‘Sections’).

astrofinityligh
Excursionist
53 2 2

I checked and that one seems normal. The issue is with the checkout button itself. Heres the issue, im using a non-shopify theme so the file titles arent the same. However, heres a list of the buttons i have opened and edited...:

 

I can give you a list of the files I opened...:

 

index.json

product.json

product.wish-list.liquid

product-template.liquid

cart-message-toast.liquid

checkout-button.liquid

newsletter-form.liquid

review-badge.liquid

theme.scss.liquid

 

Which ones should I try? (ill try the checkout button one as you respond)

knushus
Tourist
13 0 1

Well, ofcourse I can't check them, but these ones are probably not it:

index.json

product.json

theme.scss.liquid

 

I think maybe:
product-template.liquid

 

But no clue! Which button isn't working? Only the one on the product page or others as well?

astrofinityligh
Excursionist
53 2 2

Go onto the website, add product to cart, then try and hit "checkout"... it wont work. I tried the checkout button file resetting it and it didnt work.

knushus
Tourist
13 0 1

This topic was about a color change on a textbox, sorry I cant help you. Maybe someone else knows.

astrofinityligh
Excursionist
53 2 2

Sorry to bother you again- I believe that your coding helped with most of the boxes on my site but it didnt work for the "contact us" section for the email, phone number and the message. Id appreciate if you could help. 

knushus
Tourist
13 0 1

No problem. You specified text fields. Telephone and email are not text fields, they are tel and email fields. Coding is very literal. Replace your code with this code to make it work for these fields as well:

input {
   color: #000 !important;

}