gpt4 book ai didi

css - 覆盖 Polymer 的纸张输入 BiDi 行为

转载 作者:行者123 更新时间:2023-11-28 15:44:37 24 4
gpt4 key购买 nike

我正在尝试在复杂的 BiDi 应用程序中使用 paper-input 元素,我需要输入框在中具有特定的不同 unicode-bidi CSS 设置不同的设置。

我试图在包含 paper-input 元素的组件中使用 CSS 规则,但它对 paper-input 阴影没有任何影响-DOMed INPUT 元素 - 我的所有规则都在我的元素范围内使用以我的元素命名的 CSS 类(或者至少这是 Chrome 的开发工具显示的),而顶级 论文-input 元素携带该类并且可以让我的样式影响它,内部 INPUT 元素不是 - 我无法编写规则来改变它的行为。

是否有官方方法可以实现我想要实现的目标,或者我必须从头开始重新创建我自己的 paper-input 以支持此用例?

最佳答案

<paper-input>包含 <paper-input-container> , 它支持 CSS mixin ( --paper-input-container-input ) 为内部 <input> 设置样式.

您可以设置 <input>unicode-bidi像这样:

// dom-module
<template>
<style>
paper-input {
--paper-input-container-input: {
unicode-bidi: isolate;
};
}
</style>

<paper-input label="Name"></paper-input>
</template>

HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo'
});
});
<head>
<base href="https://polygit.org/polymer+1.8.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<x-foo></x-foo>

<dom-module id="x-foo">
<template>
<style>
paper-input {
--paper-input-container-input: {
background: rgba(0,0,255,0.3);
unicode-bidi: isolate;
};
}
</style>

<paper-input label="Name"></paper-input>
</template>
</dom-module>
</body>

codepen

关于css - 覆盖 Polymer 的纸张输入 BiDi 行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43015432/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com