html 输入的随机默认内联样式
Random default inline styles for html input
我正在开发一个全栈 MERN 应用程序,在 Chrome DevTools 中查看我的 React UI 时我遇到了一些奇怪的事情。
如果这些是一个因素,我安装的一些依赖项可能会导致此问题:
- 顺风CSS
- Material UI(只有图标,但也安装了@material-ui/core)
这是我的一些代码:
import React, { useReducer } from 'react';
const initialState = { name: '' };
function reducer(state, { field, value }) {
return {
...state,
[field]: value
};
}
export default ProfileForm() {
const [state, dispatch] = useReducer(reducer, initialState);
const handleChange = e =>
dispatch({ field: e.target.name, value: e.target.value });
const { name } = state;
return (
<input
className='placeholder-gray-400 text-teal-500 outline-none'
type='text'
name='name'
id='name'
placeholder='Your Name'
value={name}
onChange={handleChange}
/>
)
className 字符串值引用了 tailwindcss 类。此输入是通过 Reactjs useReducer 挂钩控制的组件。我没有使用 useState,因为我还有许多其他需要控制的输入字段。
当我使用 Chrome DevTools 在浏览器中查看此组件时,显示:
<input
class="placeholder-gray-400 p-2 outline-none"
type="email"
name="email"
id="email"
placeholder="Email"
value=""
style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
出于某种原因,这种奇怪的样式 属性 正在被应用。它发生在我的大部分输入元素上,但不是全部。我找不到有和没有的区别。也许这不是什么严重的事情,但我想知道为什么会这样。
它看起来是一个密码管理器扩展程序,可以将以下图标添加到您的输入中。
您能否禁用所有扩展程序并查看是否会改变它?
我正在开发一个全栈 MERN 应用程序,在 Chrome DevTools 中查看我的 React UI 时我遇到了一些奇怪的事情。
如果这些是一个因素,我安装的一些依赖项可能会导致此问题:
- 顺风CSS
- Material UI(只有图标,但也安装了@material-ui/core)
这是我的一些代码:
import React, { useReducer } from 'react';
const initialState = { name: '' };
function reducer(state, { field, value }) {
return {
...state,
[field]: value
};
}
export default ProfileForm() {
const [state, dispatch] = useReducer(reducer, initialState);
const handleChange = e =>
dispatch({ field: e.target.name, value: e.target.value });
const { name } = state;
return (
<input
className='placeholder-gray-400 text-teal-500 outline-none'
type='text'
name='name'
id='name'
placeholder='Your Name'
value={name}
onChange={handleChange}
/>
)
className 字符串值引用了 tailwindcss 类。此输入是通过 Reactjs useReducer 挂钩控制的组件。我没有使用 useState,因为我还有许多其他需要控制的输入字段。
当我使用 Chrome DevTools 在浏览器中查看此组件时,显示:
<input
class="placeholder-gray-400 p-2 outline-none"
type="email"
name="email"
id="email"
placeholder="Email"
value=""
style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
出于某种原因,这种奇怪的样式 属性 正在被应用。它发生在我的大部分输入元素上,但不是全部。我找不到有和没有的区别。也许这不是什么严重的事情,但我想知道为什么会这样。
它看起来是一个密码管理器扩展程序,可以将以下图标添加到您的输入中。
您能否禁用所有扩展程序并查看是否会改变它?