Html 仅使用CSS清除输入值_Html_Css

Html 仅使用CSS清除输入值

html css

Html 仅使用CSS清除输入值,html,css,Html,Css,我有这样一个输入： <input type='text' id='mytext' name='mytext' value='Chocolate' /> 是否有可能在#mytext:focus上仅使用CSS清除值。我知道我可以使用jQuery对$（“#mytext”）.val（“”执行此操作，但我只想用CSS执行此操作。我不介意它是否也只在现代浏览器中受支持谢谢。使用占位符键入时，默认值将消失，新值将在键入时显示我认为仅使用CSS是不可能的；一种解决方案是使用占位符，并将

我有这样一个输入：

<input type='text' id='mytext' name='mytext' value='Chocolate' />

是否有可能在

#mytext:focus

上仅使用CSS清除值。我知道我可以使用jQuery对

$（“#mytext”）.val（“”

执行此操作，但我只想用CSS执行此操作。我不介意它是否也只在现代浏览器中受支持

谢谢。

使用

占位符

键入时，默认值将消失，新值将在键入时显示

我认为仅使用

CSS

是不可能的；一种解决方案是使用

占位符

，并将其样式设置为值。否则你可以试试这个

<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />

尝试喜欢

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Click on textbox.</p>
<input type="text" onfocus="if(this.value == 'enter your name') { this.value = ''; }" value="enter your name" />
</body>
</html>


点击文本框

也可以使用HTML5占位符

<!DOCTYPE html>
<html>
  <head>
   <style>
input{
width: 390px;
height: 30px;
font-size: 14px;
box-shadow: 0 0 5px;
-webkit-box-shadow:  0 0 5px;   /* for chrome & Safari browser */
-moz-box-shadow:  0 0 5px;   /* for Mozilla web browser*/
border-style: none;
margin-top: 5px;
padding-left:10px;
}
</style>
   <!-- include javascript file here-->
  </head>
  <body>
    <div id="main"> 
    <!-- first div for form -->
      <div id="first">
       <h1>Please fill this form and click reset button.</h1>
        <p></p><hr/>

        <form id="myform">
        <label> First name : </label></br>
        <input type="text" id="fname" name="fname" placeholder="First Name"/><br><br>       
        </form>
      </div>

    </div>

  </body>
</html>


输入{
宽度：390px；
高度：30px；
字体大小：14px；
盒影：0 0 5px；
-webkit box shadow:0 5px；/*适用于chrome和Safari浏览器*/
-moz盒阴影：0 0 5px；/*适用于Mozilla web浏览器*/
边框样式：无；
边缘顶部：5px；
左侧填充：10px；
}
请填写此表格并单击“重置”按钮。

名字：

我将在输入框中键入内容，它需要通过单击另一个输入框来清除输入框中的任何内容。这意味着您要清除其同级的输入值？我认为使用

css

javascript或jquery是不可能的，我也这么认为。谢谢。他只说css！

<!DOCTYPE html>
<html>
  <head>
   <style>
input{
width: 390px;
height: 30px;
font-size: 14px;
box-shadow: 0 0 5px;
-webkit-box-shadow:  0 0 5px;   /* for chrome & Safari browser */
-moz-box-shadow:  0 0 5px;   /* for Mozilla web browser*/
border-style: none;
margin-top: 5px;
padding-left:10px;
}
</style>
   <!-- include javascript file here-->
  </head>
  <body>
    <div id="main"> 
    <!-- first div for form -->
      <div id="first">
       <h1>Please fill this form and click reset button.</h1>
        <p></p><hr/>

        <form id="myform">
        <label> First name : </label></br>
        <input type="text" id="fname" name="fname" placeholder="First Name"/><br><br>       
        </form>
      </div>

    </div>

  </body>
</html>