Question

我在我的html页面中使用了textarea，我已经将下面提供的css样式应用于该textarea。但有时我无法在该textarea中输入任何文本。假设我想输入任何东西。然后，它将从该textarea自动删除我键入的文本。如果我刷新我的页面。然后，它允许我输入文字。我试着解决它。但是，我无法解决。

<div id='content' class='zennable'>
    <input type='checkbox' id='zen-toggle-comment' tabindex='-1'>
    <div class='zen-backdrop'>
        <textarea id='comment' name='comment'>
        </textarea>
        <label for='zen-toggle-comment' class='expander'>
        Expand
        </label>
        <label for='zen-toggle-comment' class='shrinker'>
        Shrink
        </label>
    </div>
</div>

CSS已应用

@CHARSET "ISO-8859-1";

/* .zen-backdrop{
    height:500px;
    width:90%;
} */

label[for=comment] {
    color: #339966;
    display: block;
    font-style: italic;
    margin-bottom: 0.375em;
}

.zennable {
    position: relative;
}

.zennable input {
    display: none;
}

.zennable label {
    position: absolute;
    right: 0;
    font-size: 0.75em;
    text-transform: uppercase;
    font-variant: small-caps;
    letter-spacing: 1px;
    font-weight: 500;
    padding: 0.375em;
    color: black;
    top: -2.375em;
}

.zennable .expander {
    border-radius: 3px;
    background-color: #ad0101;
    margin-top: 25px;
}


.zennable #comment  {
    height:450px;
    width:100%;
}

.zennable .shrinker {
    display: none;
    background-color: #ad0101;
    opacity: 0.9;
}

.zennable label::before {
    background-repeat: no-repeat;
    background-size: 1em 1em;
    content: ' ';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 0.5em -0.1em 0;
    opacity: 0.5;
}

.zennable .expander::before {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiDQoJIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDMyIDMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGcgaWQ9IkxheWVyXzEiPg0KPC9nPg0KPGcgaWQ9ImZ1bGxzY3JlZW4iPg0KCTxnPg0KCQk8cG9seWdvbiBzdHlsZT0iZmlsbDojNEU0RTUwOyIgcG9pbnRzPSIyNy40MTQsMjQuNTg2IDIyLjgyOCwyMCAyMCwyMi44MjggMjQuNTg2LDI3LjQxNCAyMCwzMiAzMiwzMiAzMiwyMCAJCSIvPg0KCQk8cG9seWdvbiBzdHlsZT0iZmlsbDojNEU0RTUwOyIgcG9pbnRzPSIxMiwwIDAsMCAwLDEyIDQuNTg2LDcuNDE0IDkuMTI5LDExLjk1MyAxMS45NTcsOS4xMjUgNy40MTQsNC41ODYgCQkiLz4NCgkJPHBvbHlnb24gc3R5bGU9ImZpbGw6IzRFNEU1MDsiIHBvaW50cz0iMTIsMjIuODI4IDkuMTcyLDIwIDQuNTg2LDI0LjU4NiAwLDIwIDAsMzIgMTIsMzIgNy40MTQsMjcuNDE0IAkJIi8+DQoJCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiM0RTRFNTA7IiBwb2ludHM9IjMyLDAgMjAsMCAyNC41ODYsNC41ODYgMjAuMDQzLDkuMTI1IDIyLjg3MSwxMS45NTMgMjcuNDE0LDcuNDE0IDMyLDEyIAkJIi8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=');
}

.zennable .shrinker::before {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiDQoJIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDMyIDMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGcgaWQ9IkxheWVyXzEiPg0KPC9nPg0KPGcgaWQ9ImZ1bGxzY3JlZW5feDVGX2V4aXQiPg0KCTxnPg0KCQk8cG9seWdvbiBzdHlsZT0iZmlsbDojNEU0RTUwOyIgcG9pbnRzPSIyNC41ODYsMjcuNDE0IDI5LjE3MiwzMiAzMiwyOS4xNzIgMjcuNDE0LDI0LjU4NiAzMiwyMCAyMCwyMCAyMCwzMiAJCSIvPg0KCQk8cG9seWdvbiBzdHlsZT0iZmlsbDojNEU0RTUwOyIgcG9pbnRzPSIwLDEyIDEyLDEyIDEyLDAgNy40MTQsNC41ODYgMi44NzUsMC4wNDMgMC4wNDcsMi44NzEgNC41ODYsNy40MTQgCQkiLz4NCgkJPHBvbHlnb24gc3R5bGU9ImZpbGw6IzRFNEU1MDsiIHBvaW50cz0iMCwyOS4xNzIgMi44MjgsMzIgNy40MTQsMjcuNDE0IDEyLDMyIDEyLDIwIDAsMjAgNC41ODYsMjQuNTg2IAkJIi8+DQoJCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiM0RTRFNTA7IiBwb2ludHM9IjIwLDEyIDMyLDEyIDI3LjQxNCw3LjQxNCAzMS45NjEsMi44NzEgMjkuMTMzLDAuMDQzIDI0LjU4Niw0LjU4NiAyMCwwIAkJIi8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=');
}

.zennable label:hover {
    color: #333;
}

.zennable label:hover::before {
    opacity: 1.0;
}

.zennable textarea {
    background-color: #f6f6f6;
    border: 0;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: #333;
    display: block;
    font-size: 1em;
    height: 10em;
    line-height: 1.5em;
    padding: 0.25em 0.5em;
    width: 70%;
}

.zennable textarea:focus {
    background-color: white;
}

/* button {
    background-color: #66cc99;
    border: 0;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    display: block;
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 0.25em;
    padding: 1em;
    text-transform: uppercase;
    width: 100%;
} */

.zennable input:checked ~ .zen-backdrop .expander {
    display: none;
}

.zennable input:checked ~ .zen-backdrop .shrinker {
    display: block;
    position: absolute;
    top: 0;
}

.zennable input:checked ~ .zen-backdrop textarea {
    height: 50%;
    font-size: 1.375em;

    padding: 1em;
    background-color: #f6f6f6;
    margin: 0 auto;
    border: 0;
    resize: none;
    border-radius: 0;
    outline: none;
}

.zennable input:checked ~ .zen-backdrop {
    background-color: #f6f6f6;
    z-index: 9999;
    position: fixed;
    top: 250px;
    right: 100px;
    left: 100px;
    bottom: 160px;
    border: ridge;
}

Answer 1

您需要在同一行中关闭textarea标记像

 <textarea id='comment' name='comment'></textarea>

我试过你的代码工作正常没有发现错误。

无法在textarea中输入文本 - HTML

1 个答案: