react-otp-input
react-otp-input copied to clipboard
devfolioco
styling
- Describe the Feature Request how to apply styling to the individual default boxes after using OtpInput component? Like padding, margin or spacing in-between, size and all...?
I am actually yet to try this but I believe nth child selectors should help you with styling individual inputs!
Can't we pass an InputBox component that can override the default box styles. If we are able to give this component the position number of the box, then we can style then individually also.
<OtpInput
value={this.state.otp}
onChange={this.handleChange}
numInputs={6}
separator={<span>-</span>}
inputBox={({pos})=>{
if(pos === 2)
return <input pos2style/>
else
return <input defaultCustomStyle/>
}}
/>
I guess that some properties of the child boxes (which are none other than inputs) should be exposed. That would allow styling them separately as well.
I guess that some properties of the child boxes (which are none other than inputs) should be exposed. That would allow styling them separately as well.
I dont know anybody tried? Because I am really stuck
Can't we pass an InputBox component that can override the default box styles. If we are able to give this component the position number of the box, then we can style then individually also.
<OtpInput value={this.state.otp} onChange={this.handleChange} numInputs={6} separator={<span>-</span>} inputBox={({pos})=>{ if(pos === 2) return <input pos2style/> else return <input defaultCustomStyle/> }} />
Will this work?
Not right now. I was suggesting such a feature should added or something like @ARKEOLOGIST suggested. For now like @apollonian said you might need to use the css nth selector to style each component.
