草庐IT

input输入时的边框样式去除

爱学习的Akali King 2024-02-21 原文

很多程序员在写项目过程中，会遇到input的边框样式去除问题。今天我们就研究一下，有什么办法解决这个问题？

一般的，我们会给input设置：

          input{
				border: none;	 
			}

 这种方法，我们去除的是显示样式，但是输入的时候，我们需要点击一下input框，发现还是有一个黑色的初始化边框：

这种情况，怎么处理？

我们可以通过focus选择器来实现

去除文本输入框的样式：

input[type=text]:focus {
				outline: none;
			}

去除密码输入框的样式：

input[type=password]:focus {
				outline: none;
			}

 简而言之，type=input的哪种类型，就去除哪种样式

最后的效果如下：

以下是常见的input框的type不同的值

text                                                         默认的输入类型。

password                                               密码输入框，表现为一连串的点。

file                                                          文件上传控件

radio                                                       单选按钮

checkbox                                                复选框

hidden                                                    隐藏的输入字段，用于在表单中添加对用户不可见

button                                                     按钮

image                                                     图像形式的提交按钮

reset                                                       重置按钮,清除表单中所有数据

submit                                                    提交按钮,提交按钮会把表单数据发送到服务器

color                                                       调色板

tel                                                           包含电话号码的输入域

email                                                      包含email地址的输入域

url                                                           包含URL地址的输入域

search                                                    搜索域

number                                                  包含数值的输入域

range                                                     包含一定范围内数字值的输入域

date                                                       选取日、月、年的输入域

month                                                    选取月、年的输入域

week                                                     选取周、年的输入域

time                                                       选取月、年的输入域

datetime                                                选取时间、日 月、年的输入域(UTC时间)

datetime-local                                       选取时间、日 月、年的输入域(本地时间)

到这，我们遇到的问题已经得到了解决，但是学习这种事，要举一反三，更要善于总结，要深挖。你说呢？

入时去除margin-lefttext-alignstyle前端htmljavascript开发语言css

有关input输入时的边框样式去除的更多相关文章

  1. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  2. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  3. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  4. ruby - attr_accessor 在写入时将 nil 转换为字符串 - 2

    我有一个数据对象，其中包含许多用于各种输入的attr_accessor字段。我可以以某种方式定义类，以便所有字段的所有setter都将例如将值设置为空字符串而不是尝试的nil？ 最佳答案 这里有一个小模块可以做到这一点:moduleNilToBlankAttrAccessordefnil_to_blank_attr_accessor(attr)attr_readerattrdefine_method"#{attr}="do|value|value=''ifvalue.nil?instance_variable_set"@#{attr

  5. ruby - Formtastic，拥有 :as input type - 2

    如何将自己的字段类型添加到formtastic中？例如，我需要一个自定义的日期时间输入，我想要这样的东西::my_date%>这显然是行不通的，因为formtastic不知道:my_date(只有:boolean、:string、:datetime等等...)但是我怎样才能添加额外的输入类型呢？ 最佳答案 您需要添加自定义输入法:classMyCustomFormtasticFormBuilder这非常适合新的HTML5输入类型。你可以这样使用它:MyCustomFormtasticFormBuilderdo|f|%>:my_dat

  6. ruby - 如何在 Ruby 中使用 "fake"C# 样式属性？ - 2

    编辑:我稍微更改了规范，以更好地符合我的想象。好吧，我真的不想伪造C#属性，我想将它们合而为一并支持AOP。给定程序:classObjectdefObject.profile#magiccodehereendendclassFoo#Thisisthefakeattribute,itprofilesasinglemethod.profiledefbar(b)putsbenddefbarbar(b)puts(b)endcomment("thisreallyshouldbefixed")defsnafu(b)endendFoo.new.bar("test")Foo.new.barbar("t

  7. ruby-on-rails - 使用用户或管理员模型和 Basecamp 样式子域设计登录 - 2

    我为Devise用户和管理员提供了不同的模型。我也在使用Basecamp风格的子域。除了我需要能够以用户或管理员身份进行身份验证的一些Controller和操作外，一切都运行良好。目前我有authenticate_user!在我的application_controller.rb中设置，对于那些只有管理员才能访问的Controller和操作，我使用skip_before_filter跳过它。不幸的是，我不能简单地指定每个Controller的身份验证要求，因为我仍然需要一些Controller和操作才能被用户或管理员访问。我尝试了一些方法都无济于事。看来，如果我移动authentica

  8. ruby - 潘戈+开罗；是否有处理文本中 <img> 样式标签的现有方法？ - 2

    Pango语法支持一些纯文本标记。据我所知，这也没有扩展到嵌入图像。环顾四周，我找不到太多现有实现方式，但我之前没有做过pango+cairo工作，所以我可能会错过明显的社区。据我所知，一个合理的方法是只分析一个字符串，提取任何标签，创建cairo图像，然后相应地修改它们周围的pango布局。这看起来也像是以前有人做过的事情。我专门寻找这些问题的答案:pango+cairo是否已经解决了这个问题，我只是误读了文档？以前有没有做过这样的事情，引用在哪里？这是一种合理的方法，还是我应该尝试其他方法，什么？(还要注意我使用的是ruby​​，所以这可能会影响我的选择)

  9. ruby - 如何在 watir-webdriver 中查看应用于 HTML 元素的 CSS 样式？ - 2

    我正在使用watir-webdriver并试图检查HTML元素的背景颜色。问题是背景颜色是在CSS中设置的，而不是在HTML标签中设置的。有没有办法使用watir-webdriver读取CSS值？ 最佳答案 是的，使用样式方法例子:require'watir-webdriver'b=Watir::Browser.start'minesweeper.github.com'putsb.div(:id=>'g1minesRemaining100s').style'background-image'

  10. ruby-on-rails - 如何使用单元样式为集成测试配置 minitest - 2

    我找到了配置Rails以使用Minitest的资源。不幸的是，大多数资源都假定对所有测试类型使用Minitest规范，或者在最好的情况下，至少对集成测试。我可能是“老式”，但我觉得alatest:unit断言比rspec风格更适合我。我会使用MiniTest::Unit声明样式和Capybara来运行集成测试。我有兴趣查看minitest_helper.rb和some_model_integration_test.rb的示例，以了解我需要放置的相关配置元素，以使集成测试与Capybara很好地协同工作。有人可以解释一下如何为此配置Rails吗？ 最佳答案

随机推荐