blocks|key|1154668|text|在现代浏览器中，您可以使用:placeholder-shown来确定空输入的目标(不要与::placeholder混淆)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1154669|input:placeholder-shown+{
++++border:+1px+solid+red;+/*+Red+border+only+if+the+input+is+empty+*/
}|code-block|syntax|javascript|1154670|更多信息和浏览器支持：https://css-tricks.com/almanac/selectors/p/placeholder-shown/|1154671|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/almanac/selectors/p/placeholder-shown/^0|D|I|18|D|0|0|B|1P|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>In modern browsers you can use <code>:placeholder-shown</code> to target the empty input (not to be confused with <code>::placeholder</code>).</p>

<pre><code>input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}
</code></pre>

<p>More info and browser support: <a href="https://css-tricks.com/almanac/selectors/p/placeholder-shown/">https://css-tricks.com/almanac/selectors/p/placeholder-shown/</a></p>


blocks|key|940192|text|如果字段为required，您可以使用input:valid|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|940193|​|940194|#foo-thing:valid+%2B+.msg+{+visibility:+visible!important;+}++++++|code-block|syntax|javascript|940195|+<input+type="text"+id="foo-thing"+required="required">
+<span+class="msg"+style="visibility:+hidden;">Yay+not+empty</span>|940196|940197|请参阅live+on+jsFiddle|940198|或者使用#foo-thing:invalid进行否定(归功于@SamGoody)|940199|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/4qMLq/1/^0|5|8|J|B|0|0|0|0|0|3|G|0|0|4|I|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|R|3|S|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>If only the field is <code>required</code> you could go with <code>input:valid</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#foo-thing:valid + .msg { visibility: visible!important; }      </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;input type="text" id="foo-thing" required="required"&gt;
 &lt;span class="msg" style="visibility: hidden;"&gt;Yay not empty&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p>See <a href="http://jsfiddle.net/4qMLq/1/" rel="noreferrer">live on jsFiddle</a></p>

<p>OR negate using <code>#foo-thing:invalid</code> (credit to @SamGoody)</p>


blocks|key|940019|text|在CSS中没有这样做的选择器。属性选择器匹配属性值，而不是计算值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|940020|您将不得不使用JavaScript。|940021|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>There is no selector in CSS which does this. Attribute selectors match attribute values, not computed values.</p>

<p>You would have to use JavaScript.</p>


blocks|key|940324|text|更新字段的值不会更新它在DOM中的值属性，这就是为什么选择器总是匹配字段，即使它实际上不是空的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|940325|取而代之的是使用invalid+pseudo-class来实现您想要的，如下所示：|offset|length|style|CODE|940326|​|940327|input:required+{
++border:+1px+solid+green;
}
input:required:invalid+{
++border:+1px+solid+red;
}|code-block|syntax|javascript|940328|<input+required+type="text"+value="">

<input+required+type="text"+value="Value">|940329|940330|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/%253Ainvalid^0|0|8|7|8|K|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@$D|13|E|14|1|15]]|A|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|19|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>Updating the value of a field does not update its value attribute in the DOM so that's why your selector is always matching a field, even when it's not actually empty.</p>

<p>Instead use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ainvalid"><code>invalid</code> pseudo-class</a> to achieve what you want, like so:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input:required {
  border: 1px solid green;
}
input:required:invalid {
  border: 1px solid red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input required type="text" value=""&gt;

&lt;input required type="text" value="Value"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|940131|text|input[value=""],+input:not([value])|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|940132|与以下各项配合使用：|940133|<input+type="text"+/>
<input+type="text"+value=""+/>|code-block|syntax|javascript|940134|但是，一旦有人开始输入，样式就不会改变(您需要JS来实现)。|940135|entityMap^0|0|Z|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p><code>input[value=""], input:not([value])</code> </p>

<p>works with:</p>

<pre><code>&lt;input type="text" /&gt;
&lt;input type="text" value="" /&gt;
</code></pre>

<p>But the style will not change as soon as someone will start typing (you need JS for that).</p>


blocks|key|1154623|text|如果不需要支持传统浏览器，则可以组合使用required、valid和invalid。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1154624|使用这种方法的好处是valid和invalid伪元素可以很好地处理输入字段的类型属性。例如：|1154625|​|1154626|input:invalid,+textarea:invalid+{+
++++box-shadow:+0+0+5px+#d45252;
++++border-color:+#b03535
}

input:valid,+textarea:valid+{
++++box-shadow:+0+0+5px+#5cd053;
++++border-color:+#28921f;
}|code-block|syntax|javascript|1154627|<input+type="email"+name="email"+placeholder="john_doe@example.com"+required+/>
<input+type="url"+name="website"+placeholder="http://johndoe.com"/>
<input+type="text"+name="name"+placeholder="John+Doe"+required/>|1154628|1154629|如需参考，请在此处JSFiddle：http://jsfiddle.net/0sf6m46j/|1154630|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/0sf6m46j/^0|K|8|T|5|Z|7|0|A|5|G|7|0|0|0|0|0|I|T|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1E|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1G|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|T|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>If supporting legacy browsers is not needed, you could use a combination of <code>required</code>, <code>valid</code>, and <code>invalid</code>.</p>

<p>The good thing about using this is the <code>valid</code> and <code>invalid</code> pseudo-elements work well with the type attributes of input fields. For example:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input:invalid, textarea:invalid { 
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

input:valid, textarea:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="email" name="email" placeholder="john_doe@example.com" required /&gt;
&lt;input type="url" name="website" placeholder="http://johndoe.com"/&gt;
&lt;input type="text" name="name" placeholder="John Doe" required/&gt;</code></pre>
</div>
</div>
</p>

<p>For reference, JSFiddle here: <a href="http://jsfiddle.net/0sf6m46j/">http://jsfiddle.net/0sf6m46j/</a></p>


blocks|key|1154882|text|我意识到这是一个非常老的线程，但从那以后事情发生了一些变化，它确实帮助我找到了我需要的东西的正确组合来解决我的问题。所以我想我应该分享我的所作所为。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1154883|问题是，如果一个可选输入是已填充的，那么我需要将相同的css应用于它，就像我对一个已填充的必需输入所做的那样。css使用了psuedo类:valid，该类在未填充时也将css应用于可选输入。|1154884|这就是我修复它的方法；|1154885|HTML|1154886|<input+type="text"+required="required">
<input+type="text"+placeholder="">|code-block|syntax|javascript|1154887|CSS|1154888|input:required:valid+{
++++....
}
input:optional::not(:placeholder-shown){
++++....
}|1154889|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>I realize this is a very old thread, but things have changed a bit since and it did help me find the right combination of things I needed to get my problem fixed. So I thought I'd share what I did.</p>
<p>The problem was I needed to have the same css applied for an optional input if it was filled, as I had for a filled required. The css used the psuedo class :valid which applied the css on the optional input also when not filled.</p>
<p>This is how I fixed it;</p>
<p>HTML</p>
<pre><code>&lt;input type=&quot;text&quot; required=&quot;required&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;&quot;&gt;
</code></pre>
<p>CSS</p>
<pre><code>input:required:valid {
    ....
}
input:optional::not(:placeholder-shown){
    ....
}
</code></pre>


blocks|key|1154521|text|$('input#edit-keys-1').blur(function(){
++++tmpval+=+$(this).val();
++++if(tmpval+==+'')+{
++++++++$(this).addClass('empty');
++++++++$(this).removeClass('not-empty');
++++}+else+{
++++++++$(this).addClass('not-empty');
++++++++$(this).removeClass('empty');
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1154522|在jQuery中。我添加了一个类，并用css设置了样式。|unstyled|1154523|.empty+{+background:none;+}|1154524|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>$('input#edit-keys-1').blur(function(){
    tmpval = $(this).val();
    if(tmpval == '') {
        $(this).addClass('empty');
        $(this).removeClass('not-empty');
    } else {
        $(this).addClass('not-empty');
        $(this).removeClass('empty');
    }
});
</code></pre>

<p>in jQuery. I added a class and styled with css.</p>

<pre><code>.empty { background:none; }
</code></pre>


blocks|key|1155045|text|我可以在输入中添加一个类名，然后对其应用CSS规则：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1155046|<input+type="text"+name="product"+class="product"+/>

<style>
input[value=""].product+{
++++display:+none;
}
</style>|code-block|syntax|javascript|1155047|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It worked for me to add a class name to the input and then apply CSS rules to that:</p>

<pre><code>&lt;input type="text" name="product" class="product" /&gt;

&lt;style&gt;
input[value=""].product {
    display: none;
}
&lt;/style&gt;
</code></pre>


blocks|key|940693|text|如果你不喜欢不支持IE或pre-Chromium+Edge+(如果你正在使用它进行渐进式增强，这可能没问题)，你可以使用:placeholder-shown，正如Berend所说的那样。请注意，对于Chrome和Safari，您实际上需要一个非空占位符才能正常工作，尽管可以使用空格。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|940694|​|940695|*,
+::after,
+::before+{
++box-sizing:+border-box;
}

label.floating-label+{
++display:+block;
++position:+relative;
++height:+2.2em;
++margin-bottom:+1em;
}

label.floating-label+input+{
++font-size:+1em;
++height:+2.2em;
++padding-top:+0.7em;
++line-height:+1.5;
++color:+#495057;
++background-color:+#fff;
++background-clip:+padding-box;
++border:+1px+solid+#ced4da;
++border-radius:+0.25rem;
++transition:+border-color+0.15s+ease-in-out,+box-shadow+0.15s+ease-in-out;
}

label.floating-label+input:focus+{
++color:+#495057;
++background-color:+#fff;
++border-color:+#80bdff;
++outline:+0;
++box-shadow:+0+0+0+0.2rem+rgba(0,+123,+255,+0.25);
}

label.floating-label+input%2Bspan+{
++position:+absolute;
++top:+0em;
++left:+0;
++display:+block;
++width:+100%25;
++font-size:+0.66em;
++line-height:+1.5;
++color:+#495057;
++border:+1px+solid+transparent;
++border-radius:+0.25rem;
++transition:+font-size+0.1s+ease-in-out,+top+0.1s+ease-in-out;
}

label.floating-label+input:placeholder-shown+{
++padding-top:+0;
++font-size:+1em;
}

label.floating-label+input:placeholder-shown%2Bspan+{
++top:+0.3em;
++font-size:+1em;
}|code-block|syntax|javascript|940696|<fieldset>
++<legend>
++++Floating+labels+example+(no-JS)
++</legend>
++<label+class="floating-label">
++++<input+type="text"+placeholder="+">
++++<span>Username</span>
++</label>
++<label+class="floating-label">
++++<input+type="Password"+placeholder="+">
++++<span>Password</span>
++</label>
</fieldset>
<p>
++Inspired+by+Bootstrap's+<a+href="https://getbootstrap.com/docs/4.0/examples/floating-labels/">floating+labels</a>.
</p>|940697|940698|entityMap^0|1O|I|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>If you're happy not not supporting IE or pre-Chromium Edge (which might be fine if you are using this for progressive enhancement), you can use <code>:placeholder-shown</code> as Berend has said. Note that for Chrome and Safari you actually need a non-empty placeholder for this to work, though a space works.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>*,
 ::after,
 ::before {
  box-sizing: border-box;
}

label.floating-label {
  display: block;
  position: relative;
  height: 2.2em;
  margin-bottom: 1em;
}

label.floating-label input {
  font-size: 1em;
  height: 2.2em;
  padding-top: 0.7em;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

label.floating-label input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

label.floating-label input+span {
  position: absolute;
  top: 0em;
  left: 0;
  display: block;
  width: 100%;
  font-size: 0.66em;
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: font-size 0.1s ease-in-out, top 0.1s ease-in-out;
}

label.floating-label input:placeholder-shown {
  padding-top: 0;
  font-size: 1em;
}

label.floating-label input:placeholder-shown+span {
  top: 0.3em;
  font-size: 1em;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset&gt;
  &lt;legend&gt;
    Floating labels example (no-JS)
  &lt;/legend&gt;
  &lt;label class="floating-label"&gt;
    &lt;input type="text" placeholder=" "&gt;
    &lt;span&gt;Username&lt;/span&gt;
  &lt;/label&gt;
  &lt;label class="floating-label"&gt;
    &lt;input type="Password" placeholder=" "&gt;
    &lt;span&gt;Password&lt;/span&gt;
  &lt;/label&gt;
&lt;/fieldset&gt;
&lt;p&gt;
  Inspired by Bootstrap's &lt;a href="https://getbootstrap.com/docs/4.0/examples/floating-labels/"&gt;floating labels&lt;/a&gt;.
&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1154782|text|这个问题可能在一段时间前就被问过了，但是当我最近开始关注这个主题寻找客户端表单验证时，并且随着:placeholder-shown+support+变得越来越好，我认为下面的内容可能会对其他人有所帮助。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1154783|通过使用这个CSS4伪类的Berend思想，我能够创建一个只有在用户填写完表单后才触发的表单验证。|1154784|以下是CodePen上的演示和解释：https://codepen.io/johanmouchet/pen/PKNxKQ|1154785|entityMap|0|LINK|mutability|MUTABLE|url|https://caniuse.com/#search=%253Aplaceholder-shown|1|https://stackoverflow.com/a/35593489/5711164|2|https://codepen.io/johanmouchet/pen/PKNxKQ^0|1B|I|1U|8|0|0|D|6|1|0|I|16|2|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|H|3|I|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|J|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]|T|$5|M|N|O|E|$P|U]]]]

<p>This question might have been asked some time ago, but as I recently landed on this topic looking for client-side form validation, and as the <code>:placeholder-shown</code> <a href="https://caniuse.com/#search=%3Aplaceholder-shown" rel="nofollow noreferrer">support </a> is getting better, I thought the following might help others.</p>

<p>Using <a href="https://stackoverflow.com/a/35593489/5711164">Berend</a> idea of using this CSS4 pseudo-class, I was able to create a form validation only triggered after the user is finished filling it.</p>

<p>Here is ademo and explanation on CodePen:
<a href="https://codepen.io/johanmouchet/pen/PKNxKQ" rel="nofollow noreferrer">https://codepen.io/johanmouchet/pen/PKNxKQ</a></p>


<p>How do I apply a style to an empty input box? If the user types something in the input field, the style should no longer be applied. Is this possible in CSS? I tried this:</p>

<pre><code>input[value=""]
</code></pre>


Matching an empty input box using CSS

jQuery

如何将样式应用于空输入框？如果用户在输入字段中键入内容，则不应再应用该样式。这在CSS中是可能的吗？我试过这个：input[value=""]

问使用CSS匹配空输入框
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS匹配空输入框EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS匹配空输入框
EN