css 相关问题

Python 中的 Scrapy 安装问题

来自 scrapy 导入选择器 # 导入请求 导入请求 url = 'https://en.wikipedia.org/wiki/巴基斯坦' # 获取网页的HTML内容 响应 = requests.get(url) # 创建 Se...

如何去除HTML视频元素的顶部和底部空间？

我在创建视频元素时遇到了这个问题： 黑色框是视频（只是预览），它与其他图像具有相同的宽度和高度。经过检查，我...

强制表单文本为小写

无论用户类型如何，如何强制“用户名”文本输入中的文本为小写？ 选择用户名： &... 如何强制“用户名”文本input中的文本为小写，无论用户类型如何？ <div class="register"> <label for="username">Select username:</label> </div> <div class="registerform"> <input name="username" class="registerfont" type="text" id="username" maxlength="15" style="height:35px; width:300px"> </div> 要使其看起来像小写文本，并且在提交到服务器或复制粘贴时不更改实际字段的值，请使用以下 CSS： form input[type="text"] { text-transform: lowercase; } 如果您想在 JavaScript 中将字符串小写，请使用以下代码： var text = "This Is My Text."; var lowercase = text.toLowerCase(); 你必须使用javascript。我这里有一个例子：http://jsfiddle.net/xCfdS/3/ HTML： <input type="text" id="txt" onkeyup="return forceLower(this);"/>​ Javascript： function forceLower(strInput) { strInput.value=strInput.value.toLowerCase(); }​ 要关闭移动浏览器虚拟键盘上单词的自动大写，请使用以下代码： <input autocapitalize="none" ></input> 它应该适用于最新的移动浏览器。 有关更多详细信息，请查看此链接。 这不会阻止用户故意选择输入大写字母。 使用 jquery + 保留光标位置： $(document).ready(function(){ $("#username").on('input',function(e){ // Store the current selection range var start = this.selectionStart; var end = this.selectionEnd; // Convert text to lowercase $(this).val($(this).val().toLowerCase()); // Restore the selection range this.setSelectionRange(start, end); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <input id="username"> @fdiv_bug 的答案很好，除了他们答案的评论中提到的问题。使用 input 事件而不是 keyup 事件为我解决了这些问题。 HTML： <input oninput="this.value=this.value.toLowerCase()"/>​ Javascript： element.addEventListener('input',function(){this.value=this.value.toLowerCase()});​ 结合大家的一些回答来简化事情。 使用 CSS 避免任何闪烁并用于显示目的。 input[type="username"] { text-transform: lowercase; } 现在，因为这仅影响浏览器中文本的显示，所以我们还需要更改输入的值。 向输入添加事件侦听器。 const usernameInput = document.querySelector('input[type="username"]'); usernameInput.addEventListener("input", function(e){ e.target.value = e.target.value.toLowerCase(); }); 我们可以像平常一样将其发送到服务器，并且像其他人提到的那样，检查服务器端以确保恶意用户没有向我们发送 UpPPercaSe 输入。 老问题。新答案。 现在有了 HTML5 表单验证（2021 年）所有主要浏览器都支持，使用 pattern 属性 在客户端的输入字段上强制使用小写文本相对简单。 （在撰写本文时，除了 Opera Mini 之外，所有其他版本都支持 pattern 属性）。 HTML： <label>Field Name (lowercase letters only)</label> <input type="text" pattern="[a-z]" placeholder="Field Name (lowercase letters only)"> 注意： 以下内容来自问题，但半超出了问题的范围。 在电子邮件地址字段中强制使用小写字母（这就是让我想到这个问题的原因）似乎风险更大，因为使用pattern/rejex来验证电子邮件地址是相当复杂并且存在与实施相关的潜在问题pattern 与 type="email". 结合使用 除上述之外，对于我的用例，以下pattern就足够了：<label>Email Address (lowercase letters only)</label> <input type="email" pattern="[^A-Z]+" placeholder="Email Address (lowercase letters only)"> rejex 表达式 [^A-Z]+ 允许使用任何非大写字符。我通过 type="email" 将实际的电子邮件地址验证留给浏览器。我在桌面上用 Chrome、Firefox、Edge 和 IE11 进行了测试，一切正常。 这是我的建议，它基于@fdiv-bug & @ali-sheikhpour 的答案： 为此字段添加 text-transform: lowercase;。 input[type="email"] { text-transform: lowercase; } 捕获此字段上的“更改”事件，并通过 (String)toLowerCase 函数将值转换为小写。 var upperCaseMatch = /[A-Z]/; var events = { CHANGE: 'change' }; $(function() { $(document).on('change', 'input[type="email"]', function() { var value = $(this).val(); if (!upperCaseMatch.test(value)) { return; } $(this).val(value.toLowerCase()); }); }); 希望对您有用。 我使用这个简单的代码： <input type="text" onkeyup="this.value = this.value.toUpperCase();"> 使用 onchange 代替 <input name="username" onchange="this.value = this.value.toUpperCase();" style="text-transform: lowercase; height:35px; width:300px" class="registerfont" type="text" id="username" maxlength="15" > 当用户输入文本时，此 JavaScript 会将文本转换为小写。它将记住光标位置，以避免如果用户在现有文本中间输入字符，则光标被设置到末尾。 我还将autocapitalize设置为off，这样移动浏览器中的虚拟键盘上就不会自动显示大写字母。 var element = document.querySelector("input"); element.addEventListener('input', function(e) { const position = e.target.selectionStart; // Lowercase the text, which happens to also reset the selection: e.target.value = e.target.value.toLowerCase(); // Restore the cursor position to where it was: e.target.setSelectionRange(position, position); }); <input type="text" autocapitalize="off"> 如果用户粘贴内容，setInterval()将会运行 setInterval(function(){ let myinput = document.getElementById('myinput'); //make lowercase myinput.value = myinput.value.toString().toLowerCase(); //remove spaces (if you want) myinput.value = myinput.value.toString().replace(' ', ''); //force specific characters myinput.value = myinput.value.toString().replace(/[^a-z0-9\/\-_]/, ''); }, 10); 因为这是一个使用 .replace() 的循环函数，一次仅替换第一个出现的位置，但仍然循环所有它们，这似乎是动画删除粘贴文本上的空格。 使用jquery假设输入ID是用户名： $(document).ready(function(){ $("#username").on('input', function(){ $(this).val( $(this).val().toLowerCase() ); }) });

DIV 像图像一样“包含”以保持缩放比例

我有一个图像，它具有 object-fit: contains 的 css 属性，当我更改画布尺寸时，它会正确缩放图像的比例。我正在尝试在其顶部构建一个网格，其中

智能向导 Jquery 插件 Square 进度不起作用

我在我的页面中添加了智能向导作为步骤插件。 但顶部导航栏上的进度不起作用。 线路没有出现 我添加了“square”并将必要的CSS添加到代码中 但不是...

这是一个很好的 HTML 实践吗？

这是 HTML 中的一个好习惯吗？？？ 加上 了解更多 要添加...

无法选择div元素的类并向该元素添加另一个类[JS]

我正在做这个 GPS 项目，遇到了一个问题。我想构建一个由 360x180 网格项组成的网格，每个网格项代表一个 GPS 坐标，它动态地获取自己的...

NextJS 无法导入和应用字体

所以我得到了这个静态 html 模板，我目前正在将其转换为 next/react。 无论我做什么，我似乎都无法在正文上应用谷歌字体（Rajdhani），只能在具有布局的主标签上应用

有没有办法在 woocommerce 结帐处“浮动标签”？ （如 Shopify）

我尝试通过在用户关注特定输入时对标签进行动画处理来复制 WooCommerce 结帐页面中 Shopify 结帐的体验，如下所示： 我试过了...

打开/关闭时我是否将 Unicode 三角形向上/向下指向？

我有以下 HTML： 点我！ ▼ Lorem ipsum dolor 坐 amet... 以及以下 jQuery： $('div h1').click(功能...

属性 ::before 对于 CSS 实现不起作用

我看不到之前的实现出现。 在 div-image 框中最后一个部分库中的属性之前 我负责所有解决方案，例如内容或相对于父级和绝对的位置......

css/js 类似魔兽等游戏的技能冷却动画效果？

我正在尝试制作一种效果，当单击技能图标时，它会进入“冷却”状态，类似于《魔兽世界》等典型 MMO 中技能的冷却状态。 我找到了以下 achie 的代码...

默认扩展音量

我希望音量元素从一开始就展开，而不需要鼠标光标悬停。我关于这个默认隐藏的元素： 我没有找到任何内置选项（

Dash：如何在回调中更新数百个元素？

在我的 Dash 应用程序中，我有多个 html.Div 组件（所有组件都具有几乎相同的外观和布局）。现在，当我点击复选框时，我想隐藏所有这些元素。 大家提出的解决方案...

在大元素上做 CSS 背景动画，而不会隐藏在主体上并保持滚动

我想知道是否有一种方法可以在不影响页面滚动的情况下对背景上的大对象进行动画处理，因为我目前所处的情况，当...

如何禁用移动Safari上的所有缩放？

我浏览了多个 StackOverflow 问题、多个网络教程，但没有一个对我有任何帮助。 我正在开发一个网页游戏，但根本无法运行。我还没有尝试过任何 JS 解决方案...

如何将图像放置在 div 内、右侧和另一个 div 下？

这就是我想要实现的设计：链接。 我尝试制作两个单独的 Div，并将一个放置在另一个 Div 之上，但它不起作用。 老实说，我想过将图像作为背景......

按钮点击后消失

var audioPlayer = document.getElementById('audioPlayer'); var subtitleDisplay = document.getElementById('subtitleDisplay'); var 字幕 = []; var mediaRecorder = null; varrecordedChunks = []; 变种

Flask - 即使单击提交按钮后，仍将复选框及其选中的值保留在页面中

我希望复选框保留在左侧 div 中，并保留之前检查的值，即使在提交生成按钮后也是如此。 我将页面分成两部分（类似于streamlit侧边栏）。 第一个用户将检查...

像 HTML 和 CSS 中的 google 一样的搜索栏

我正在学习 HTML、CSS，并且在制作像 google 这样的搜索栏时遇到问题。 您能给我任何建议吗？我做错了什么，尤其是尺寸方面？谢谢 ：） 我正在学习HTML，CSS，我在制作像谷歌这样的搜索栏时遇到了问题。 您能给我任何建议吗？我做错了什么，尤其是尺寸方面？谢谢:) <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:th="http://www.thymeleaf.org"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </link> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </link> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="shortcut icon" type="image/x-icon" href="https://image.freepik.com/photos-libre/courbe-de-vapeur-de-la-fumee-d&-39;onde_19-123974.jpg" /> <style> .container { width: 1000px; margin-top: 100px; text-align: center; } h2 { font-family: "Trebuchet MS", Helvetica, sans-serif; size: 150px; fill: #294F6D; } div { width: 500px; height: 50px; } h1 { text-align: center; fill: 02111 D; } .search input[type="search"] { width: 400px; height: 50px; } </style> <body> <div class="container" <form action="/worldoffragrance"> <input name="search" /> <input type="submit" value="GO" /> </form> </div> </body> </html> 感谢您的任何建议:) 试试这个，这可能会在某种程度上帮助你。 已更新 input{ border: none; padding: 10px; margin: 10px; height: 20px; width: 500px; border:1px solid #eaeaea; outline:none; } input:hover{ border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9; } input:focus{ border-color:#4d90fe; } input[type="submit"] { border-radius: 2px; background: #f2f2f2; border: 1px solid #f2f2f2; color: #757575; cursor: default; font-size: 14px; font-weight: bold; width: 100px; padding: 0 16px; height:36px; } input[type="submit"]:hover { box-shadow: 0 1px 1px rgba(0,0,0,0.1); background: #f8f8f8; border: 1px solid #c6c6c6; box-shadow: 0 1px 1px rgba(0,0,0,0.1); color: #222; } <div class="main"> <input type="text" /> <input type="submit" value="Go"> </div> 我已经做了这个并且工作正常.. <!DOCTYPE html> <html> <head> <style> .searchbar{ margin-top:25px; margin-left:283px; width:100%; } .bar{ border-radius:0; -webkit-box-shadow: 2px 3px 0px -2px #ccc; padding:10px; border:0px; outline: none; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #CCC; } .bar:hover{ -webkit-box-shadow: 3px 6px 7px -3px #ccc; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12 col-xs-12"> <div class="searchbar"> <div class="form-group "> <input type="text" class="bar" style="width:588px; height:44px; outline:none;" class="form-control" > <a href="#"><i style="margin-left:559px; top:-30px; "class="glyphicon glyphicon-search"></i></a> </div> </div> </div> </div> </div> </body> </html> <style> input { border-radius: 24px; border: 1px solid #dfe1e5; background: #fff; padding: 20px; display: flex; z-index: 3; width: 638px; height: 44px; margin: 20px; } input:hover{ box-shadow: 0 0 8px 1px #e1e1e1; } </style> <form action="https://www.google.com/search" method="get"target="_blank" id="search-form"> <input name="q" type="text" placeholder="Google Search" autocomplete="off" autofocus></form> 几乎是 Google 搜索栏的精确复制品 https://abhishek-soren.github.io/Google-Look-Alike/ 您也可以检查一下。看起来很实用。