我必须像Firefox一样在HTML5验证上的chrome中的输入元素周围带红色边框。

我已经搜索了很多,但是找不到精确的答案。非常感谢使用css进行操作的任何帮助。
谢谢。
我正在尝试找到显示非常宽和长的表格的解决方案。我的页眉和页脚是通过使用 CSS 样式固定的,position: fixed;因为我的容器可以灵活地包含任意数量的数据。下面是我的页面布局。
标头
容器分区
我的桌子
div 结束
页脚
我已经使容器 div 水平滚动,但要找到滚动条,我必须向下滚动,直到上下文中整个页面或表格的末尾。
那么,无论如何,我可以让滚动条出现在浏览器窗口末尾之前,或者换句话说,我可以将其固定,就像页眉和页脚一样,这样我就不需要向下滚动整个页面来查看我的内容了。表数据。
如果您能为我提供任何帮助,我将不胜感激。
编辑 这里是为您提供帮助的图像
滚动前的图像
向下滚动后的图像
我运行我的测试案例npm run test -- --watch,其中test被mocha --require babel-polyfill --require babel-core/register --require ./test/withDom.js --require ./test/test_helper.js --recursive ./test命令来运行测试用例使用mocha。
我的组件Jquery积极地用于操纵DOM和处理事件。
在我的第一次运行中,所有测试用例都运行良好。但是,一旦我修改了一些测试用例,观察者就会自动重新运行这些测试用例。在jquery无法找到使用选择以下的DOM元素。这很明显,因为DOM在我控制台登录wrapper.html()或时未修改页面body.innerHTML。
如果您能解决这个问题,我将不胜感激。
这是代码
withDom.js
import { JSDOM } from 'jsdom';
const jsdom = new JSDOM('<!doctype html><html><body><div id="root"></div></body></html>');
const { window } = jsdom;
function copyProps(src, target) {
Object.defineProperties(target, {
...Object.getOwnPropertyDescriptors(src),
...Object.getOwnPropertyDescriptors(target),
});
}
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: 'node.js',
};
global.requestAnimationFrame …Run Code Online (Sandbox Code Playgroud) 我被困在设置我的新 React 项目的过程中。我正在使用 webpack、webpack-dev-middleware、express 等来实现自定义服务器。导入 scss (sass) 文件时出现问题。
在我的浏览器控制台上抛出以下错误
Uncaught TypeError: _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_postcss_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_4_style_scss__WEBPACK_IMPORTED_MODULE_1__.default is undefined
Run Code Online (Sandbox Code Playgroud)
我的终端也显示以下警告但编译项目
WARNING in ./src/styles/style.scss 13:15-29
export 'default' (imported as 'content') was not found in '!!../../node_modules/mini-css-extract-plugin/dist/loader.js!../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[4]!./style.scss' (possible exports: )
Run Code Online (Sandbox Code Playgroud)
这是我的文件:
包.json
{
"name": "XYXYXY",
"version": "0.1.0",
"private": true,
"author": "XYZ",
"license": "Proprietary",
"dependencies": {
"@popperjs/core": "^2.5.3",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.4",
"@testing-library/user-event": "^12.1.7",
"acorn": "^6.4.2",
"axios": "^0.20.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.5.2",
"html2canvas": "^1.0.0-rc.7",
"jquery": "^3.5.1",
"jspdf": "^2.1.1",
"lodash": "^4.17.20",
"moment": "^2.29.1",
"mongoose": "^5.10.9",
"nodemon": "^2.0.4",
"popper.js": "^1.16.1",
"react": …Run Code Online (Sandbox Code Playgroud) 默认情况下,选择框中仅显示一个选定选项或默认选项,但我希望所有选定选项都显示在同一行,并且其中选定的选项必须突出显示。
以下是我的代码
.selecttodiv{
display: inline-block;
height: 3em;
-webkit-appearance: none;
-moz-appearance: none;
}
.selecttodiv option{
display: inline-block;
width: 2.5em;
height: 2.5em;
}
<select class="selecttodiv">
<option>I</option>
<option>II</option>
<option>III</option>
<option>IV</option>
<option>V</option>
<option>VI</option>
</select>
Run Code Online (Sandbox Code Playgroud)
以下是 jsfiddle 的链接:https://jsfiddle.net/6yg4yhyy/
我可以在单行上显示所有选项,但在选择时不能显示。
谢谢你的帮助。