'Remove input focus border in react select
This is my styles config. Im using tailwindcss also.
export const colourStyles: StylesConfig = {
control: (styles, { isFocused }) => ({
...styles,
backgroundColor: 'white',
border: '2px solid #E2E2E2',
'&:hover': {
border: '2px solid #141414',
},
borderRadius: '0.5rem',
borderBottomLeftRadius: isFocused ? 0 : '',
borderBottomRightRadius: isFocused ? 0 : '',
boxShadow: '0px 2px 0px rgba(0, 0, 0, 0.04)',
}),
menu: (styles) => ({
...styles,
height: 345,
marginTop: '0px',
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
border: '2px solid #E2E2E2',
borderTop: 'none',
boxShadow:
'0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',
}),
option: (styles, { isSelected }) => {
return {
...styles,
backgroundColor: isSelected ? '#f6f6f6' : 'white',
color: isSelected ? '#141414' : '',
'&:hover': {
backgroundColor: '#f6f6f6',
},
paddingBottom: 0,
paddingTop: 0,
paddingLeft: 16,
paddingRight: 16,
};
},
input: (styles) => ({
...styles,
}),
menuList: (styles) => ({
...styles,
padding: '6px 0px',
minHeight: 343,
}),
placeholder: (styles) => ({ ...styles, fontSize: 14 }),
singleValue: (styles) => ({ ...styles }),
};
this is my select component
const SingleValue = ({ children, ...props }: SingleValueProps) => {
return (
<components.SingleValue {...props}>
{/* @ts-ignore */}
{props?.selectProps?.value?.text ? (
// @ts-ignore
<div>{props?.selectProps?.value.text}</div>
) : (
children
)}
</components.SingleValue>
);
};
<Select
{...field}
blurInputOnSelect
options={options}
styles={colourStyles}
placeholder={placeholder}
components={{
IndicatorSeparator: () => null,
SingleValue,
}}
value={options.find((each) => each.value === field.value)}
onChange={(newValue: any) => {
field.onChange(newValue.value);
}}
/>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
