Question

我在项目中使用Materialise但我不想在这个特定的 select 元素上使用它：

<select>            
    <option value="Male">m</option>            
    <option value="Female">f</option>
</select>

我认为解决问题的唯一方法就是制作自己的风格并将其应用于元素，但由于Materialize是新的，也许有更简单的解决方案。

顺便说一句，我正在使用Symfony3，并且使用Materialize，除了ChoiceType之外，在type.php文件中添加的每个组件都呈现出色。所以这就是我想要排除select元素的Materialize样式的原因。这是代码：

$opcionesLibreDeTalco = array(
    'label'   => 'Libre de talco',
    'choices' => array(
        'm' => 'Male',
        'f' => 'Female'
    )
);

Answer 1

从Materialise 0.97.7开始，没有办法排除元素，因为它们的CSS选择器非常宽泛，没有排除。

例如，他们的scss看起来像：

select {
  background-color: $select-background;
  width: 100%;
  padding: $select-padding;
  border: $select-border;
  border-radius: $select-radius;
  height: $input-height;
}

您只需手动覆盖Materialise的样式。

Answer 2

Materialise已经看到了这种可能性。看看他们的选择器输入：

 KeyStore keyStore = KeyStore.getInstance("PKCS12");
            keyStore.load(
                    new ByteArrayInputStream(Base64Helper.decodeIntoByteArray(PKCS12_CERT_AS_STRING),
                    PKCS12_PASSWORD.toCharArray());

            KeyManagerFactory keyManagerFactory = KeyManagerFactory.getInstance(KeyManagerFactory.getDefaultAlgorithm());
            keyManagerFactory.init(keyStore, PKCS12_PASSWORD.toCharArray());
            SSLContext sslContext = SSLContext.getInstance("SSL");
            sslContext.init(keyManagerFactory.getKeyManagers(), null, null);
            HurlStack hurlStack = new HurlStack(null, sslContext.getSocketFactory());
            requestQueue = Volley.newRequestQueue(MyApplication.getInstance().getAppContext(), hurlStack);

到处都有：not（.browser-default）。考虑到这一点，只需将此类应用于输入：

input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea

Renders as this (screenshot)

Answer 3

您现在可以添加browser-default类来消除Materializecss的影响。

由于我们覆盖了许多默认的浏览器样式和元素，因此我们提供了.browser-default类来将这些元素还原为原始状态。

https://materializecss.com/helpers.html#browser-default

如何从一个元素中排除Materialize样式

3 个答案: