ss_qstns Posted August 25, 2019 Share 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? Link to comment
tuanphan Posted August 25, 2019 Share 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ss_qstns Posted August 26, 2019 Author Share 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. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.