草庐IT

html - 开关 css 不适用于输入类型的 radio

coder 2023-08-12 原文

我有一个开关按钮。但它不适用于输入型 radio 。如果我尝试使用复选框按钮，它会起作用。为什么？我该如何解决，保持 radio 输入？

@charset "utf-8";
/* CSS Document */

/* ---------- GENERAL ---------- */

body {
	background: #4a4a4a;
	color: #151515;
	font: 100%/1.5em "Lato", sans-serif;
	margin: 0;
}

input {
    font-family: inherit;
    font-size: 100%;
    line-height: normal;
    margin: 0;
}

input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/* ---------- SWITCH ---------- */

.container {
	height: 64px;
	left: 50%;
	margin: -32px 0 0 -80px;
	position: absolute;
	top: 50%;
	width: 160px;
}

.switch {
	background: #fff;
	border-radius: 32px;
	display: block;
	height: 64px;
	position: relative;
	width: 160px;
}

.switch label {
	color: #fff;
	font-size: 48px;
	font-weight: 300;
	line-height: 64px;
	text-transform: uppercase;
	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-ms-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
	width: 100px;
}

.switch label:nth-of-type(1) {
	left: -75%;
	position: absolute;
	text-align: right;
}

.switch label:nth-of-type(2) {
	position: absolute;
  right: -75%;
	text-align: left;
}

.switch input {
	height: 64px;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 160px;
	z-index: 2;
}

.switch input:checked~label:nth-of-type(1) { color: #fff; }
.switch input:checked~label:nth-of-type(2) { color: #808080; }

.switch input~:checked~label:nth-of-type(1) { color: #808080; }
.switch input~:checked~label:nth-of-type(2) { color: #fff; }

.switch input:checked~.toggle {
	left: 4px;
}

.switch input~:checked~.toggle {
	left: 100px;
}

.switch input:checked {
	z-index: 0;
}

.toggle {
	background: #4a4a4a;
	border-radius: 50%;
	height: 56px;
	left: 0;
	position: absolute;
	top: 4px;
	-webkit-transition: left .2s ease;
	-moz-transition: left .2s ease;
	-ms-transition: left .2s ease;
	-o-transition: left .2s ease;
	transition: left .2s ease;
	width: 56px;
	z-index: 1;
}

.c-window{
  display: block;
  position: absolute;
  width: 235px;
  height: 235px;
  margin: 0 auto;
  border-radius: 100%;
  border: 8px solid #FFB399;
  background: #5ddfe8; 
  box-shadow: 0px 0px 5px rgba(0,0,0,0.25) inset;
  overflow: hidden;
	transition: background 1s ease-in-out;
}


input[type="radio"]:checked ~ .c-window {
  background: #111;
}
 
	<div class="container">

       <div class="c-window"></div>
      
		<div class="switch white">

			<input type="radio" name="switch" id="switch-off">
			<input type="radio" name="switch" id="switch-on" checked>

			<label for="switch-off">On</label>
			<label for="switch-on">Off</label>

			<span class="toggle"></span>


  

		</div> <!-- end switch -->

	</div> <!-- end container -->

我希望 .c-window 在切换时改变背景颜色

最佳答案

  • 正如@fcalderan 在评论中提到的，您有一些错别字。
  • 您需要将 .c-window 作为兄弟，更改 HTML 标记并向其添加 z-index:-1。
  • 并且您需要指定要更改背景 颜色的输入。

/* CSS Document */

/* ---------- GENERAL ---------- */

body {
  background: #4a4a4a;
  color: #151515;
  font: 100%/1.5em"Lato", sans-serif;
  margin: 0;
}
input {
  font-family: inherit;
  font-size: 100%;
  line-height: normal;
  margin: 0;
}
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
/* ---------- SWITCH ---------- */

.container {
  height: 64px;
  left: 50%;
  margin: -32px 0 0 -80px;
  position: absolute;
  top: 50%;
  width: 160px;
}
.switch {
  background: #fff;
  border-radius: 32px;
  display: block;
  height: 64px;
  position: relative;
  width: 160px;
}
.switch label {
  color: #fff;
  font-size: 48px;
  font-weight: 300;
  line-height: 64px;
  text-transform: uppercase;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  width: 100px;
}
.switch label:first-of-type {
  left: -75%;
  position: absolute;
  text-align: right;
}
.switch label:last-of-type {
  position: absolute;
  right: -75%;
  text-align: left;
}
.switch input {
  height: 64px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 160px;
  z-index: 2;
}
.switch input:checked~label:first-of-type {
  color: #fff;
}
.switch input:checked~label:last-of-type {
  color: #808080;
}
.switch input:checked~label:first-of-type {
  color: #808080;
}
.switch input:checked~label:last-of-type {
  color: #fff;
}
.switch input:checked {
	z-index: 0;
}
.switch input:checked~.toggle {
  left: 4px;
}
.switch input~:checked~.toggle {
  left: 100px;
}
.toggle {
  background: #4a4a4a;
  border-radius: 50%;
  height: 56px;
  left: 0;
  position: absolute;
  top: 4px;
  -webkit-transition: left .2s ease;
  -moz-transition: left .2s ease;
  -ms-transition: left .2s ease;
  -o-transition: left .2s ease;
  transition: left .2s ease;
  width: 56px;
  z-index: 1;
}
.c-window {
  display: block;
  position: absolute;
  width: 235px;
  height: 235px;
  margin: 0 auto;
  border-radius: 100%;
  border: 8px solid #FFB399;
  background: #5ddfe8;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25) inset;
  overflow: hidden;
  transition: background 1s ease-in-out;
  z-index:-1
}
input:last-of-type[type="radio"]:checked ~ .c-window {
  background: #111;
}
<div class="container">
 
  <div class="switch white">
    <input type="radio" name="switch" id="switch-off">
    <input type="radio" name="switch" id="switch-on" checked>
    <label for="switch-off">On</label>
    <label for="switch-on">Off</label>
    <span class="toggle"></span>
    <div class="c-window"></div>
  </div>
  <!-- end switch -->
</div>
<!-- end container -->

关于html - 开关 css 不适用于输入类型的 radio ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35434568/

radiohtmlswitchtransition34cssinputchecked

有关html - 开关 css 不适用于输入类型的 radio的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  3. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  4. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  5. ruby - Infinity 和 NaN 的类型是什么？ - 2

    我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN？它们是对象、关键字还是其他东西？ 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串

  6. ruby - 检查方法参数的类型 - 2

    我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样？我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗？ 最佳答案 使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时，它将引发ArgumentError。defmy_method(number)

  7. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  8. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  9. ruby - Ruby 有 `Pair` 数据类型吗？ - 2

    有时我需要处理键/值数据。我不喜欢使用数组，因为它们在大小上没有限制(很容易不小心添加超过2个项目，而且您最终需要稍后验证大小)。此外，0和1的索引变成了魔数(MagicNumber)，并且在传达含义方面做得很差(“当我说0时，我的意思是head...”)。散列也不合适，因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题，但我很想知道:Ruby标准库是否已经带有这样一个类？ 最佳

  10. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

随机推荐