Overriding Input components placeholder font-style

[jared-hunter]

As can be seen in the screenshot, i’m trying to target the ::placeholder so i can override the font-style from italic to normal
i’ve tried using ‘styled’ component to target it along with many variations of targeting the element name but i cant seem to find anyway to get it to modify it

Does anyone have any guidance on how i can change that style or perhaps its just not possible?

my styled component attempt:

const StyledInput = styled(Input)`
& ::placeholder {
    font-style: normal;
    opacity: 0.42;
  }
}`;

my customizations using the customization provider

{
  WORKER_TRANSFER_DIR_SEARCH_BOX: {
    visibility: 'visible',
  },
  WORKER_TRANSFER_DIR_SEARCH_BOX_PREFIX: {
    padding: '0.4379rem 0.5rem',
  },
  WORKER_TRANSFER_DIR_SEARCH_BOX_ELEMENT: {
    fontWeight: '400',
  },
}

my react component:

<Input
  element="WORKER_TRANSFER_DIR_SEARCH_BOX"
  insertBefore={ <SearchBox/> }
  type="text"
  key="custom-directory-input-field"
  placeholder="Search"
/>

[SiTaggart]

Hi @jhunter-twilio

You are so close! You can do everything you need via the elements object on the Customization Provider. It will accept css selectors as keys to each Element you target. And obviously you have to target the input HTML element itself.

So you would write something like

WORKER_TRANSFER_DIR_SEARCH_BOX_ELEMENT: {
  "&::placeholder": {
    fontStyle: "normal"
  }
}

At the end of the day, the object for WORKER_TRANSFER_DIR_SEARCH_BOX_ELEMENT is just a Emotion CSS style object. It can do everything Emotion can do with style objects, but we type some of the values to only be design tokens where necessary.

Here's a Code sandbox to show you what I mean to achieve overriding the placeholder styles on the Input. https://codesandbox.io/s/input-placeholder-style-override-b1lc4f