disabled input styles

theme/utils/getOutlinedFieldStyles.ts

@@ -30,6 +30,10 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
       _hover: {
         borderColor: 'transparent',
       },
+      ':-webkit-autofill': {
+        // background color for disabled input which value was selected from browser autocomplete popup
+        '-webkit-box-shadow': `0 0 0px 1000px ${ mode('rgba(16, 17, 18, 0.08)', 'rgba(255, 255, 255, 0.08)')(props) } inset`,
+      },
     },
     _invalid: {
       borderColor: getColor(theme, errorColor),

ui/address/contract/ContractMethodField.tsx

@@ -34,7 +34,7 @@ const ContractMethodField = ({ control, name, placeholder, setValue, isDisabled
           />
           { field.value && (
             <InputRightElement>
-              <InputClearButton onClick={ handleClear }/>
+              <InputClearButton onClick={ handleClear } isDisabled={ isDisabled }/>
             </InputRightElement>
           ) }
         </InputGroup>

ui/shared/InputClearButton.tsx

@@ -5,13 +5,15 @@ import crossIcon from 'icons/cross.svg';
 
 interface Props {
   onClick: () => void;
+  isDisabled?: boolean;
 }
 
-const InputClearButton = ({ onClick }: Props) => {
+const InputClearButton = ({ onClick, isDisabled }: Props) => {
   const iconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
 
   return (
     <IconButton
+      isDisabled={ isDisabled }
       colorScheme="gray"
       aria-label="Clear input"
       title="Clear input"