Need a little help styling a dropdown select item

Question

I have a form (a Pardot form to be precise) that shows the dropdown select elements properly on a desktop but on a mobile device, they show like this:

As you can see the font color is different. Two questions: How do I change the font color of the field on a mobile device to be like the other fields, and how do I change the color of the dropdown arrow. I used the arrow styling from this answer.

The CSS for the input and select elements is as below:

/* The input fields */
#pardot-form input.text,
#pardot-form textarea.standard,
#pardot-form input.date {
  background-color: white;
  border: solid 1px #e2e2e2;
  font-size: 15px;
  color: #757575;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  font-family: 'Rubik', sans-serif;
  box-sizing: border-box;
  margin-bottom: 10px;
  -webkit-appearance: none; /* Safari and Chrome */
  -moz-appearance: none; /* Firefox */
  appearance: none;
}

#pardot-form select {
  /*background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);*/
  background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') 96% 40% no-repeat transparent;
  background-color: white;
  border: solid 1px #e2e2e2;
  font-size: 15px;
  color: #757575;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  font-family: 'Rubik', sans-serif;
  box-sizing: border-box;
  margin-bottom: 10px;
  -webkit-appearance: none; /* Safari and Chrome */
  -moz-appearance: none; /* Firefox */
}

score 0 · Answer 1 · answered Feb 27 '22 at 09:24

#pardot-form select {
      background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="red"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') 96% 40% no-repeat transparent;
      background-color: white;
      border: solid 1px #e2e2e2;
      font-size: 15px;
      color: #757575;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      width: 100%;
      font-family: 'Rubik', sans-serif;
      box-sizing: border-box;
      margin-bottom: 10px;
      -webkit-appearance: none; /* Safari and Chrome */
      -moz-appearance: none; /* Firefox */
    }

<div id="pardot-form">
    <select name="" id="">
      <option value="">option1</option>
      <option value="">option1</option>
      <option value="">option1</option>
      <option value="">option1</option>
      <option value="">option1</option>
      <option value="">option1</option>
    </select>
  </div>

I’m not sure I understand what the answer is here. Pardot generates the form HTML on its own and applies the pardot-form ID automatically. Hence the pardot-form ID before each selector in the CSS. — electrophile, Feb 27 '22 at 09:29

Need a little help styling a dropdown select item

1 Answers1