Can't force a Form Submit button color change - forms

I am trying to force a color change to the default button of a Form Submit. I know having this style in-line isn't the best approach, but I am just doing it for testing purposes, once I have it working, I'll pull into my CSS.
Any suggestions on what I need to do differently to force the color to change? Thanks in advance.
<style type="text/css">
.button
{
width:205px;
height: 25px;
color: #bda935;
line-height: 20px;
padding-bottom: 2px;
vertical-align: middle;
font-family: "Lucida Grande", Geneva, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
<!--font-weight: bold;-->
text-transform: none;
border:1px solid transparent;
}
.button:hover
{
background-image:url('tiny_.gif');
}
</style>
<form action = "Contact Us.cshtml">
<input type="submit" class="button" value="Request More Information">
</form>

Here is what I found worked.
I needed to add !important after my background-color: #bda935 in my CSS. So, it now looks like this:
.button
{
width:205px;
height: 25px;
background-color: #bda935 !important;
color: #bda935;
line-height: 20px;
padding-bottom: 2px;
vertical-align: middle;
font : 10pt 'Century Gothic';
color : #000000;
font-size: 13px;
<!--font-weight: bold;-->
text-transform: none;
border:1px solid transparent;
}

Related

EMAIL: Text color on VML Background not black

I have an email that I'm working on that included a light-colored background image with black text and a button over it. On MS-Outlook Dark Mode (macOS 10.15) and Outlook.com Dark (Chrome), the text and button are white. Here's my code.
I followed advice from this article: and have added the fixes recommended in the section How to Keep Text Black Inside VML in Dark Mode, but the text is still white. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<title>NielsenIQ Consumer 360</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta name="color-scheme" content="light dark">
<meta name="supported-color-scheme" content="light dark">
<!--[if mso]><xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if mso]>
<style type="text/css">
body, table, td, h1, h2, h3, p, li, a {font-family: Helvetica, Arial, sans-serif !important;}
</style>
<![endif]-->
<style>
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size:0; line-height: 0; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; font-size: 0; line-height: 0; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* GMAIL BLUE LINKS */
u ~ div #body-table a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* SAMSUNG MAIL BLUE LINKS */
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
a {text-decoration: none;} /* for Windows 10 underlining */
body[yahoo]{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
table { border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;empty-cells:show; }
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
/* Make sure the links are Black in Gmail */
.link { text-decoration: underline; color: #000000 !important; }
.link:hover { text-decoration: none; }
/* Target Outlook App for Dark Mode */
/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img { display:none; display:none !important; }
/* Styles for Dark Mode */
#media (prefers-color-scheme: dark ) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
h1.black-header1, p.black-para, .inner a { color: #000000 !important; }
.keep-black { color: #000000 !important; }
/* .two-column__white-bg-left-img .two-column,
.two-column__black-bg-right-img .two-column,
.wrapper { background-image: none !important; } */
/* Hides Light Mode-Only Content, Like Images */
.light-img { display:none; display:none !important; }
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;700&display=swap');
.wrapper { width: 640px; background-color: #fefefe; }
div.left-column td.inner,
div.right-column td.inner { padding-top: 20px; }
.niq-top { width: 100%; }
.niq-angle { width: 100%; }
.top-story { padding-left: 60px; padding-top: 20px; padding-right: 60px; padding-bottom: 60px; }
.hero-image { width: 100%; max-width: 100%; }
.dark-gray-cat-left { font-family:'Montserrat', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 14px; color: #666666; font-weight: 700; }
.divider { width: 640px; height: 12px; }
.social-section, .copyright-section { padding-left: 60px; padding-top: 60px; padding-bottom: 60px; padding-right: 60px; }
.branding-section { padding-left: 60px; padding-top: 20px; padding-bottom: 20px; padding-right: 60px; width: 640px; }
.footer-section { padding-left: 60px; padding-top: 60px; padding-right: 60px; padding-bottom: 80px; }
img.bottom-logo { width: 196px; height: auto; }
a.black-link { color:#000000; }
a.white-link { color:#ffffff; }
/*C360 Styles */
.inner { padding-left: 60px; padding-top: 20px; padding-right: 60px; padding-bottom: 30px; }
/*Media Queries*/
#media screen and (max-width: 480px) {
.wrapper { width: 480px; }
.niq-top { width: 100%; }
.niq-top img { width: 480px; height: auto; }
.niq-angle img { width: 480px; height: auto; }
.top-story { padding-left: 40px; padding-top: 20px; padding-right: 40px; padding-bottom: 40px; }
.branding-section { width: 480px; }
.divider { width: 480px; height: 6px; }
.social-section, .copyright-section { padding-left: 40px; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; }
.footer-section { padding-left: 40px; padding-top: 40px; padding-right: 40px; padding-bottom: 60px; }
}
</style>
<!--[if gte mso 16]>
<style>
body {
background-color:#353535 !important;
}
.keep-black {
mso-style-textfill-type:gradient;
mso-style-textfill-fill-gradientfill-stoplist:"0 \#000000 1 100000\,99000 \#000000 1 100000";
color: #ffffff !important;
mso-color-alt: auto;
}
</style>
<![endif]-->
</head>
<body style="background-color: #b3b3b3;">
<!-- Top Section Header / 0- ===== Only this top portion expands 100% width across the top ===== -->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #010101;" width="100%">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" class="niq-top" style="background-color: #010101;font-size:0;line-height:0;"><img alt="NielsenIQ" src="https://microsites.nielsen.com/web-assets/wp-content/uploads/sites/10/2021/01/the-iq-brief-top-bar-no-N.png"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Top Section -->
<!-- Main Content Area -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" role="presenation" style="background-color: #fefefe;">
<tr>
<td><!-- Top Story Block -->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center"><!-- Top Story -->
<table border="0" cellpadding="0" cellspacing="0" class="wrapper" role="presentation" style="width: 640px;">
<tr>
<td class="lead-in" style="background-image: url('https://microsites.nielseniq.com/web-assets/wp-content/uploads/sites/7/2022/03/white-background-1.png'); background-color: #ffffff; background-position:top left; background-repeat: no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" fillcolor="#fefefe" style="width: 640px; height: 317px;">
<v:fill type="tile" type="frame" src="https://microsites.nielseniq.com/web-assets/wp-content/uploads/sites/7/2022/03/white-background-1.png" color="#656565" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="inner">
<h1 class="keep-black" style="font-family:'Montserrat', Helvetica, Arial, sans-serif; font-size: 28px; line-height: 38px; color: #000000; mso-color-alt:auto;font-weight: 700;">Gain the momentum to tackle what's next</h1>
<p class="keep-black" style="font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 26px; color: #000000; mso-color-alt:auto;">Explore ideas that are motivating progress and transforming the consumer packaged goods industry.</p>
<!--[if mso]><i style="letter-spacing: 12px;mso-font-width:-100%;mso-text-raise:32pt"> </i><![endif]--><span style="mso-text-raise:12pt;color:#ffffff;">Join us at C360 2022</span><!--[if mso]><i style="letter-spacing: 12px;mso-font-width:-100%"> </i><![endif]-->
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Red Asterisk directly beside placeholder in input box

I've done a bunch of googling, but I can't find an answer anywhere that works for me.
I'm creating a form (for the first time ever) and I need a red asterisk directly next to the placeholder text in the input boxes. Embarrassingly, this is the closest I have been able to get so far:
form {
margin: 0 auto;
background-color: #3d549a;
}
input {
font-family: avenir;
font-size: 17px;
color: #ffffff;
font-weight: 100;
border: none;
width: 400px;
padding: 15px;
border-radius: 5px;
}
textarea {
height: 5em;
resize: vertical;
font-family: avenir;
font-size: 17px;
color: #ffffff;
font-weight: 100;
border: none;
width: 860px;
padding: 15px;
border-radius: 5px;
}
.asterisk_input:after {
content: " *";
color: #e32;
position: absolute;
margin: 0px 0px 0px -20px;
font-size: 17px;
padding: 0 5px 0 0;
}
.buttonblue {
padding-left: 90px;
background-color: #31b9e9;
font-family: avenir;
font-size: 16px;
width: 300px;
height: 75px;
color: #ffffff;
padding: 0;
border: none;
border-radius: 5px;
box-shadow: 0px 5px 1px #21a1c6;
}
button {
margin-left: .5em;
}
<table width="100%" style="background-color: #3d549a" height="820px">
<tr height="250">
<td valign="bottom" align="center" width="100%" colspan="4">
<span style="font-family: avenir; font-size: 40px; color: #ffffff; font-weight: 500; line-height: 10px;">GET IN TOUCH<span/>
<hr color="#273a72" width="75" align="centre">
<span style="font-family: avenir; font-size: 15px; color: #ffffff; font-weight: 100; line-height: 10px;">1600 Pennslyvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111</span>
</td>
</tr>
<tr>
<td>
<form action="/my-handling-form-page" method="post">
<p>
<input type="text" id="name" placeholder="Your Name" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" />
<span class="asterisk_input"> </span>
<input type="email" id="mail" placeholder="Your Email" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" />
<span class="asterisk_input"> </span>
</p>
<p>
<textarea id="msg" placeholder="Your Message" style="font-family: avenir; color: #fff; font-weight:100; font-size: 17px; background-color: #273a72"></textarea>
<span class="asterisk_input"> </span>
</p>
<p>
<button class="buttonblue" type="submit">SEND MESSAGE</button>
</p>
</form>
</td>
</tr>
</table>
(I'm also having trouble centreing it ;) But one problem at a time, I suppose
Unfortunately, there isn't a universal way of doing this easily, but there is a way to get support for most browsers. The reason being is that you're going to need to style a placeholder, and there isn't a universal standard on how this is done. But, as long as you don't need support for older IE browsers, you should be okay with the following approach:
First, add a class named "required" or some such to the input box itself. Then, add the following tags:
.required::-webkit-input-placeholder:after {
content: " *";
color: red;
}
.required:-moz-placeholder:after {
content: " *";
color: red;
}
.required:-ms-input-placeholder:after {
content: " *";
color: red;
}
for align centre just add
display: table;
in .form class.

-webkit-text-size-adjust: none; not working on iPhone

I'm creating an html esignature. Despite the same styles being applied to all of the text there is still ONE line of text the the iPhone keeps enlarging. I've read that -webikit-text-size-adjust: none; should prevent this but it is not working. Here is my code for this particular table cell.
<td valign="bottom" class="tag" style="display: block; width: 280px; height: 18px; padding-right: 6px; padding-top: 2px; text-align: right;">
<a style="font-family: Arial; font-size: 11px; line-height: 20px; font-weight: 500; color:#585859; white-space: nowrap; -webkit-text-size-adjust: none;">branding <span style="color: #db1e17;">|</span> communications <span style="color: #db1e17;">|</span> interactive</a>
</td>
In my media query above specifically for iPhone my code is this:
#media screen and (max-device-width: 480px) and (max-device-height: 320px), screen and (max-device-width: 320px) and (max-device-height: 480px){
td.tag {
width: 136px !important;
height: 7px !important;
padding-top: 2px !important;
padding-right: 3px !important;
}
td.tag a{
font-size: 5px !important;
line-height: 9px !important;
-webkit-text-size-adjust: none;}
Can you see what I could be doing wrong?
I would put this outside of the media query.
div, p, a, li, td { -webkit-text-size-adjust:none; }
All you are doing at this point is telling the phone to never set the minimum font-size for all elements.

Excess space on the right

* {
margin: 0;
border: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: none;
}
body {
background: #474747 url(bg.png);
}
h1 a {
display: block;
text-decoration: none;
font: 40px Helvetica, Arial, Sans-Serif;
letter-spacing: -5px;
text-align: center;
color: #a0a0a0;
text-shadow: 0px 5px 8px #2a2a2a;
}
h2 {
font: 30px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222;
text-shadow: 0px 2px 3px #555;
}
div#mobile pre {
width: 275px;
margin: 0 auto;
background: #222;
padding: 10px;
font-size: 20px;
color: #555;
text-shadow: 0px 2px 3px #171717;
-webkit-box-shadow: 0px 2px 3px #555;
-webkit-border-radius: 20px;
}
This is what I have so far on an iPhone-optimized version of my site. But when viewed from an iPhone/iPod touch, it looks well, except that there is excess space on the right. How can I fix this?
I think you have some tabs or spaces after your "labels". You should also have the text in label-elements.
What you might have:
<pre> <form method="post" action="/index.php">Enter a URL<br />(WITH THE http://): <br /><input type="text" name="url">
<br />Want a custom tag? <br /><input type="text" name="custom">
</form>
No URL was entered.</pre>
What you should have:
<form method="post" action="/index.php">
<label for="url">
Enter a URL (WITH THE http://):
</label>
<input type="text" name="url">
<label for="custom">
Want a custom tag?
</label>
<input type="text" name="custom">
</form>
<p>No URL was entered.</p>
Then you need to style it to make it look like before. Remember the pre-element is usually used to output code.

Using CSS & HTML with MFMailComposeViewController

My CSS formatting is lost when i use it with MFMailComposeViewController. Below is my sample code. I just insert my table data under the body section.
<html>
<head>
<style type="text/css">
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#customers td,
#customers th {
font-size: 1em;
text-align: right;
border: 1px solid #999999;
padding: 10px 25px 5px 25px;
}
#customers th {
font-size: 1.1em;
text-align: center;
padding: 10px 25px 5px 25px;
background-color: #ffffff;
color: #000000;
}
</style>
</head>
<body>
%#
</body>
</html>
I am setting the "isHTML=YES" while composing the email. Am i missing something or is this method of using CSS not supported on the iphone using MFMailComposeViewController
I'm not clear, but are you putting your CSS inside the <body> or <head>? I believe MFMailComposeViewController needs to have CSS defined inside the <body></body> tags.