How to style inputs that have been filled already?

[adrenaline681]

I've been trying to style inputs that have been filled already with a green outline using the &:valid selector but it doesn't seem to work since all the inputs turn green even if no object has been selected. My CSS looks like this

&:valid {
    border-color: #00c700;
    box-shadow: 0 0 0.25rem #00c700;
}

<PinField 
      ref={inputRef}
      onChange={setCode}
      validate={/^[0-9]$/}
      onComplete={()=>setComplete(true)}
      disabled={verified}
/>

How can I style the input boxes that have already been filled?

[adrenaline681]

I figured it out, i just need to add the "required" prop to the PinField.