如何用css或js将输入字段占位符改为浮动标签

kcrjzv8t 于 2023-02-14 发布在其他

关注(0)|答案(3)|浏览(114)

<div class="row mg-b-25">
                    <div class="col-lg-4">
                        <div class="form-group">
                            <input class="form-control" type="text" name="category_name" id="category_name" placeholder="Enter Category *" maxlength="50" required>
                        </div>
                    </div>
                </div>

我想当我专注于输入字段而不是占位符更改为浮动标签

css

来源：https://stackoverflow.com/questions/75394963/how-to-change-input-field-placeholder-to-floating-label-by-css-or-js

3条答案

按热度按时间

nwwlzxa71#

您可以使用CSS：focus选择器和CSS：：placeholder选择器
参考：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
::placeholder {
  color: red;
  opacity: 1; 
}

input:focus::placeholder  {
    color: blue;
  float:right;
  opacity: 1;
}
</style>
</head>
<body>

<input type="text" placeholder="A placeholder text..">

</body>
</html>

赞(0）回复(0）举报 2023-02-14

sgtfey8w2#

尝试以下浮动标签示例：
https://stackblitz.com/edit/css-image-filter-efmtr9?file=index.html,styles.css

赞(0）回复(0）举报 2023-02-14

myzjeezk3#

以下是使用Materialize的示例
这个例子工作Here，但我不知道为什么它不工作的代码片段。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="Input-Field">
<Input id="Email_input" type="Email" class="Validate" />
<Label for="Email_input">Email</Label>
</div>
</body>
<html>

赞(0）回复(0）举报 2023-02-14

我来回答

如何用css或js将输入字段占位符改为浮动标签

3条答案

相关问题

热门标签

最新问答