Ich benutze Polymer 3 und Lit-Element (2.2.1). Die Version von mwc-textfield ist 0.13.0. Ich habe die Dokumentationen zu dieser Version gelesen. In dieser Dokumentation habe ich festgestellt, dass wir Mixin für die Höhe hinzufügen können. Ich hatte verschiedene Möglichkeiten ausprobiert, aber es gelang mir nicht. Möglicherweise ist die von mir verwendete Syntax falsch. Ich möchte die Höhe meines Textfeldes verringern. Dies ist mein Textfeld
<mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield>
und mein css
#textBox{
text-transform: none;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: #fff;
--mdc-text-field-hover-line-color: #f5f5f5;
--mwc-text-width: 100%;
width:100%;
}
Das standardmäßig angewendete CSS ist
:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: transparent;
}
.mdc-text-field:not(.mdc-text-field--disabled) {
background-color: rgb(245, 245, 245);
}
.mdc-text-field {
display: flex;
width: 100%;
}
.mdc-text-field {
height: 56px;
display: inline-flex;
position: relative;
box-sizing: border-box;
will-change: opacity, transform, color;
border-radius: 4px 4px 0px 0px;
overflow: hidden;
}
.mdc-text-field {
--mdc-ripple-fg-size: 0;
--mdc-ripple-left: 0;
--mdc-ripple-top: 0;
--mdc-ripple-fg-scale: 1;
--mdc-ripple-fg-translate-end: 0;
--mdc-ripple-fg-translate-start: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
user agent stylesheet
label {
cursor: default;
}
<style>
#textfield {
width: var(--text-field-width,80%);
height: 100%;
position: absolute;
left: 0;
top: -12px;
text-transform: capitalize;
--mwc-text-width: 100%;
}
<style>
mwc-textfield {
--mdc-theme-primary: transparent;
--mdc-text-field-ink-color: black;
--mdc-text-field-fill-color: transparent;
--mdc-text-field-disabled-fill-color: transparent;
}
Die Standardhöhe für das Textfeld beträgt 56 Pixel. Was ich versucht habe ist
#textbox.mdc-text-field--height{
height:45px;
}
und
#textbox.mdc-text-field--height('45px');
und auch Mixin in der Knotenmoduldatei als Höhe hinzugefügt : var (- mdc-text-field-height, 56px); und in CSS als verwendet
#textBox{
--mdc-text-field-height:45px;
}
Jede Hilfe wäre sehr dankbar! Danke im Voraus.
quelle
querySelector
, haben Sie darüber nachgedacht, auf die MDC-Version umzusteigen?