Custom CSS for input fields not coming across when form is attached in an Email Task

asked on July 9, 2019 • Show version history

All input for Single Line fields stay the same from filling out the form, to the email task, but the email field and multi-line revert back to default. Please see my CSS ... I'm not sure what I am missing. Any help or guidance would be greatly appreciated.

.MyTable label.form-option-label {display: none;}
.MyTable {color: #122546; font-size: 18px;}

.TwoPerLine {display: inline-block; width: 47%;}
.TwoPerLine .cf-medium {width:97%;}

#q20,#q29 {display: inline-block; width: 47%}
#q20 .cf-medium {width:97%;}
#q29 .cf-medium {width:97%;}

.html {color: #122546; font-size:16px;}

#q23,#q33 {display: inline-block; width: 47%}
#q23 .cf-medium {width:92%;}
#q33 .cf-medium {width:97%;}

#form-title-wrap {text-align: center;}
#form-title-wrap label {
  text-align: center;
}

#q15,#q34 {display: inline-block; width: 47%}
#q15 .cf-medium {width:97%;}
#q34 .cf-medium {width:92%;}

input[type=text], textarea, select {font-weight: bold; font-size: 16px; color: #122546;}
div[type=text], textarea, select {font-weight: bold; font-size:16px; color: #122546;}

I believe the div[type=text], textarea, select is wrong, but I know you have to have the div for the single lines to stay.

Thanks

Bill

0 0

replied on July 9, 2019 • Show version history

Do all of the CSS properties disappear, or just the ones you specified above? (from when you said, 'div[type=text], textarea, select is wrong').

If none of your styles are applying, then it's an issue with your HTML template not connecting to the CSS stylesheet, not an issue with CSS syntax. CSS will still work even if a few lines are wrong, it just won't apply those lines to the HTML. So one bad line wouldn't cause the whole template to revert to default.

I'm curious if the computer which you're generating the email on doesn't have access to that CSS stylesheet. Are you creating the email from an external server?

See this discussion for inserting JavaScript into HTML emails. I imagine that it's a similar process for CSS, except instead of <script> tags you would use <style> tags: https://answers.laserfiche.com/questions/76415/add-javascript-code-in-email-body#76614

0 0

replied on July 11, 2019

I'm trying to make the input larger and bolder. This works for all fields, except the email. Do you know what I might add to the input line to include email?

I was asking if the div[type=text], textarea, select was correct or not. I know the div {font-weight: bold; font-size:16px; color: #122546;} works, but only for the single line fields. I added the other in, trying to reflect the input line to see if that would help. Don't think it has anything to do with where the email is coming from or if what server, bc like I mentioned, the single line holds it properties after submission.

Thanks for your response. Any other input is greatly appreciated.

0 0

replied on July 16, 2019 • Show version history

Sorry for the delay, I'm just seeing this now. The commas in that selector might be tripping you up. The comma essentially says "Apply the following style to div[type="text"] and to all textareas and to all selects." Just use a space if you want to select child elements, for example

#parent, .children {
  will style everything with 
  ID of parent AND with class 
  of children on the entire page, 
  whether or not the .children 
  elements are descendants of 
  #parent
}

#parent .children {
  will style everything with 
  ID of parent AND with class 
  of children which are 
  descendants of #parent, 
  but not on the entire page
}

I'd also be very surprised to see a div with type text. I don't think that's possible, though I'm not an expert. You might be trying to grab an input, so make sure you're grabbing the correct element. As a side note, you'd need to put quotes in there so it would look like

input[type="text"]

More information on CSS selectors and combinators can be found here: https://www.adtrak.co.uk/blog/the-ultimate-css-selectors-cheatsheet/

And if you're curious how more specifically check the classes of the elements on your form, hit F12 on Chrome to enter dev tools, then select Elements, and you'll see a mouse cursor on a box. Click that and you can traverse the DOM easily to see how elements are nested and labeled once the page renders. This gives you a lot more freedom than just classes and IDs on the forms page.

Since the comma is more of an AND operator, you can combine lines 26 and 27 since the textarea and select are completely redundant. Once you figure out which element you want to grab you can just add it to the list in 26 and save some CSS

0 0

Question

Question

Custom CSS for input fields not coming across when form is attached in an Email Task

Replies

Sign in to reply to this post.