ss_qstns Posted August 25, 2019 Posted August 25, 2019 I'm editing a collection landing page and here is the CSS I have developed so far: #collection-xxxxxx { .Header {display:none;} .Footer {display:none;} .form-wrapper .field-list .field .field-element {background-color: rgba(0,0,0,.5); } .form-wrapper .field-list .field .field-element:focus { background-color: rgba(255,255,255,.9); } .sqs-block-form input {color: white;} .sqs-block-form input:focus {color: black;} .form-button-wrapper .sqs-editable-button-color {background-color: rgba(255,0,0,1);} .sgs-editable-button-color:hover {color: blue;} } I set up the form, so that it is transparent and when you enter text the fields are white (text black) and when you are not editing the fields the text is white. I'm having issues with the button. When I hover over the button the background is white. I want the button background to be red, text white, and when I hover over the button the background either stays red or changes to anything but a light color. I'm okay with the button hover to change to white if I can have the button text color change to black at the same time. What am I missing here?
tuanphan Posted August 25, 2019 Posted August 25, 2019 You should share url to check. It will take time if only see your code without site url. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
ss_qstns Posted August 26, 2019 Author Posted August 26, 2019 @tuanphan Here is the CSS I have for this page. #collection-5d6341b2f8b6d200017b4c40 { .Header {display:none;} .Footer {display:none;} .Mobile {display:none;} .form-wrapper .field-list .field .field-element {background-color: rgba(0,0,0,.5); } .form-wrapper .field-list .field .field-element:focus { background-color: rgba(255,255,255,.9); } .sqs-block-form input {color: white;} .sqs-block-form input:focus {color: black;} .form-button-wrapper .sqs-editable-button-color {background-color: rgba(255,0,0,1);} } My issue is with the Form button. You can see when you hover over it turns white and the text stays white as well. I'd like to have some contrast with the text when the hover happens. In addition, I need to anchor link the button at the bottom of the page to the form. That may be another post.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.