Change background color of text box | Community
Skip to main content
Answered

Change background color of text box

  • December 14, 2021
  • 4 replies
  • 772 views

Forum|alt.badge.img

We would like to change the background color of the text box so the placeholder text can be seen and read as well as darken the paper airplane graphic on the send button. We tried the CSS below, based on manually changing it in the Google Chrome dev tools. Yet, the colors do not change. Any suggestions would be greatly appreciated. Thanks, John

 

Text box placeholder text difficult to see as well as send button’s paper airplane graphic.

<div data-tf-popover="xxxxx" data-tf-custom-icon="https://images.typeform.com/images/9kskSa3HrHZD" 
     data-tf-button-color="#FDFDFD" data-tf-tooltip="CLICK FOR 10-15% CODE!" 
     data-tf-open="scroll" data-tf-open-value="30" data-tf-chat data-tf-hidden="species=xxxxx,page=xxxxx" 
     style="all:unset;"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
<style>
  .iakiiG {
    background: #f9f6f6 !important;
    color: #1e2027 !important;
    font-size: 16px;
    font-family: inherit;
    display: flex;
    height: 40px;
    width: 100%;
    padding: 0px 12px;
    box-shadow: rgb(86, 96, 104) 0px 0px 0px 1px inset;
    border: none;
    border-radius: 4px;
    line-height: 20px;
    outline: none;
    transition: all 0.3s ease 0s;
    appearance: none;
  }
  .hwrOfj
  {
    color: #418BC1 !important;
  }
  .iakiiG::placeholder {
    color: #1e2027 !important;
  }
</style>

Best answer by mathio-tf

Hello @John F. Kennedy unfortunately this is not supported. You would need to inject the CSS into the form, not your page which you could achieve via eg Google Tag Manager integration, however it will very likely break next time we release any update.

My suggestion would be to choose a different colors for your typeform.

View original

4 replies

Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14905 replies
  • December 15, 2021

Hi @John F. Kennedy Nice to see you here again! We don’t natively have a way to change the background color where the text is situated, though @mathio is there any sort of workaround for this you know of?


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • Answer
  • December 15, 2021

Hello @John F. Kennedy unfortunately this is not supported. You would need to inject the CSS into the form, not your page which you could achieve via eg Google Tag Manager integration, however it will very likely break next time we release any update.

My suggestion would be to choose a different colors for your typeform.


Forum|alt.badge.img

Hi @Liz and @mathio ,

Thank you for your response. We proceeded with trying different form background colors until we got the contrast right.

Thanks,

John


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14905 replies
  • December 16, 2021

Glad to hear that worked, @John F. Kennedy ! Let us know if we can help with anything else. 


Reply