复选框不适用于materializecss - HTML、CSS

oaxa6hgo  于 2023-05-02  发布在  其他
关注(0)|答案(8)|浏览(82)

我似乎不能让复选框工作,而使用materializecss,因为其他人来交叉这个问题,并设法解决它?
我使用的图书馆:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

不带库的复选框-https://jsfiddle.net/d2yk4sbv/2/

<div><label> <input type=checkbox> label 1 </label></div>

带有库的复选框-https://jsfiddle.net/d2yk4sbv/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
            <div><label> <input type=checkbox> label 1 </label></div>

复选框似乎在没有库的情况下工作得很好,但问题是,我的应用程序依赖于使用materializecss,所以我不能不使用它:(
链接到materializecss网站-http://materializecss.com/

ovfsdjhp

ovfsdjhp1#

要工作。似乎你需要把标签和输入检查之间的关系。你为什么不这样试试

<div>
  <input type="checkbox" id="check">
  <label for="check">label 1</label>
</div>

http://materializecss.com/forms.html#checkbox

wz3gfoph

wz3gfoph2#

常规的HTML5复选框将不会显示加载的materialcss。
这是常规的HTML5复选框。

<input type="checkbox" name="nameOfChoice" value="1" checked>

2018年,随着1。0,以上所有答案都不起作用了,除了这个。
你必须按照标签,输入,跨度结构来工作!
图片来源:@SmartManoj

<label>
    <input type="checkbox" />
    <span>Red</span>
</label>

https://materializecss.com/checkboxes.html

yyyllmsg

yyyllmsg3#

它不工作,因为你有错误的结构,把checkbox放在label旁边,而不是在label内部,并把它们都 Package 在p

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<p>
  <input type="checkbox" id="test" checked="checked" />
  <label for="test">Hello</label>
</p>
lvjbypge

lvjbypge4#

**2019 -版本1。联系我们

我喜欢《物化》的简洁,但它有问题。
尝试通过 AJAX 传递复选框。

if(state.success === true) {
                        tbody.append('<tr><th scope="row" style="background-color:' + state['color'] + 
                            '"><label><input type="checkbox" /><span>Red</span></label></th><td>' + state['date'] +
                            '</td><td>' + state['priority'] + '</td><td>' + state['name'] + 
                            '</td><td>' + state['desc'] + '</td><td>' + state['email'] + '</td></tr>'); 
                    }

不得不将此添加到CSS样式

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: absolute;
    opacity: 1;
    pointer-events: auto;
}

这种覆盖通用HTML和CSS标准以适应其JS的想法并不理想。我有一个网站稳定与实现,不会再这样做。

t0ybt7op

t0ybt7op5#

根据版本0。100.2,解决方案是添加这个CSS类:

.input-field label {
  pointer-events: auto !important;
}

请注意,此版本中的结构必须为:

<input type="checkbox" id="check">
<label for="check">label 1</label>

来源:https://github.com/Dogfalo/materialize/issues/5062

rbl8hiat

rbl8hiat6#

我能让复选框显示并可点击的唯一方法就是这样做

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: unset;
    opacity: 1;
    pointer-events:all
}

我没有动画,但老实说,我不在乎,我没有更多的时间浪费在一些应该是简单的。以上的解决方案都不适合我

vvppvyoh

vvppvyoh7#

在物化1版本中。0
在JS1中)按文档查找输入。getElementById。..2)检查输入。格子的
input.checked为false或true

hof1towb

hof1towb8#

在v1.0.0中,标签标记内的复选框(文本环绕span)将仅起作用。

<label>
        <input type="checkbox" />
        <span>Red</span>
   </label>

https://github.com/Dogfalo/materialize/issues/1376

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
    
   Checkbox:  <br/>
   
   <label>
           <input type="checkbox" />
           <span></span>
      </label>

相关问题