将消失的默认文本“您的名字”添加到文本输入框

Question

您好尝试添加默认的消失文本“您的名字”，当用户开始向此行代码输入名称时，“消失的名字”就会消失。

<?php echo '<input type="text" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ) . '" size="30" />';?>

Answer 1

如果我没记错的话，您需要使用<input>标签的placeholder属性，如下所示

<?php echo '<input type="text" placeholder="Your Name" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ) . '" size="30" />';?>

下面的简单演示

<input type="text" placeholder="Your Name" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="" size="30" />

Update

您已安装一个主题，该主题在文件wp-content/themes/realtor/style.css行号5829中使用以下CSS

::-webkit-input-placeholder {
    color: #fff;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
}

:-ms-input-placeholder {
    color: #fff;
}

您必须修改文件中的这些，或者更好地重写这些类，如下所示，我使用了inherit值，您可以将其更改为所需的颜色

 ::-webkit-input-placeholder {
    color: inherit !important;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: inherit !important;
}

:-ms-input-placeholder {
    color: inherit !important;
}

Answer 2

由于某种原因，您的占位符被设置为白色，因此您需要将其设置为较深的颜色，例如：

input::placeholder {
    color: #bbb;
}

将为您提供如下结果：