正文 

当前位置： 首页 > 知识 >

缩小占位符文本后如何使占位符和文本框光标居中？

     2023-03-05     271

关键词：

【中文标题】缩小占位符文本后如何使占位符和文本框光标居中？【英文标题】：How can I center the placeholder and text box cursor after shrinking the placeholder text? 【发布时间】：2020-06-12 03:41:05 【问题描述】：

我有一个输入文本框，里面有占位符文本；现在，我正在缩小占位符文本，以便在文本框获得焦点时它仍然可见，但是当我缩小它时，尽管垂直平移，占位符文本太靠近输入框的顶部。

我知道文本框中的光标仍然居中，但我希望 占位符文本和光标在文本框中居中。有没有办法只用 CSS 来做到这一点？

//我的输入文本框：

<input
  type="text"
  className=errors.email && errors.email.length !== 0 ? 'bad-input' : ''
  value=this.state.email
  onChange=this.update('email')
  placeholder="Email"
/>

// 缩小占位符文本的样式：

.login-modal-wrapper form .main-content-wrapper input[type="text"]:focus::placeholder,
.login-modal-wrapper form .main-content-wrapper input[type="password"]:focus::placeholder 
  font-size: 12px;
  transform: translateY(-20px);
  transition: all 0.5s;

【问题讨论】：

【参考方案1】：

对于水平居中，您应该使用text-align:center。

垂直调整需要手动设置，但有2个选项；

    您可以调整文本框的填充； padding-top:10px; 或 padding-top:40%;

    调整文本框内文本的行高； line-height:20px;.

【讨论】：

澄清一下，您的意思是将padding-top 添加到input[type="text"] 选择器中吗？ @Karen 抱歉，无法完全理解。我添加了另一个答案。【参考方案2】：

我又看了你的问题，这次我明白了，通过调整占位符的字体大小，会影响其相对于输入字段内文本的垂直对齐方式。

您可以通过使用position:relative 并更改top 属性来调整占位符伪类；

参见下面的示例；

input::placeholder 
  position: relative;
  top: 30px;
  font-size: 100px;

<!DOCTYPE html>
<html>

<body>
  <form action="/action_page.php">
    <label for="fname">First name:</label>
    <input style="height:100px; width:200px;" type="text" id="fname" placeholder="test" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="Submit">
  </form>
</body>

</html>

【讨论】：

在powerpoint中占位符和文本框一样也是一种可以插入的对象

判断题：在PowerPoint中占位符和文本框一样也是一种可以插入的对象√or×?谢谢！错，占位符是无法插入的，占位符的多少和位置是由版式决定的，用户可以删除，但无法添加。参考技术A正确占位符和文本框是一样的 参考技术B可... 查看详情

如何使用左侧的占位符和右侧的编辑文本创建 UITextField？

】如何使用左侧的占位符和右侧的编辑文本创建UITextField？【英文标题】：HowtocreateUITextFieldwithplaceholdertotheleftandeditedtexttotheright?【发布时间】：2013-09-1108:09:58【问题描述】：如何创建UITextField，左边是占位符，右边是编辑文本？U... 查看详情

如何使输入占位符随光标动态移动？

】如何使输入占位符随光标动态移动？【英文标题】：HowcanImakeaninputplaceholderdynamicallymovewithcursor?【发布时间】：2017-08-1715:45:16【问题描述】：我的表单中有一个输入，它包含产品的价值价格，在开头输入文本占位符是\'$\'：<in... 查看详情

如何在 React Material UI TextField 中居中占位符和文本

】如何在ReactMaterialUITextField中居中占位符和文本【英文标题】：HowtocenterplaceholderandtextinReactMaterialUITextField【发布时间】：2020-01-1103:00:12【问题描述】：当前设计：预期设计：TextField标签如下所示：<TextFieldmultiline=falseautoFocusplac... 查看详情

iOS 5.0 Safari 不在文本框中垂直居中占位符

】iOS5.0Safari不在文本框中垂直居中占位符【英文标题】：iOS5.0Safarinotverticallycenteringplaceholderintextbox【发布时间】：2012-01-2310:08:03【问题描述】：我想将页面上输入文本框中输入的文本垂直居中。实现此目的的典型方法是将行高和... 查看详情

Firefox 输入占位符和框大小

】Firefox输入占位符和框大小【英文标题】：FirefoxInputPlaceholder&BoxSizing【发布时间】：2014-09-2715:15:52【问题描述】：我找不到太多关于此问题的修复信息，但我输入的占位符文本未在FF中显示。我已经看到了一些引用::-moz-plachol... 查看详情

QListWidget为空时如何设置占位符文本居中？

】QListWidget为空时如何设置占位符文本居中？【英文标题】：HowtosettheplaceholdertextinthecenterwhentheQListWidgetisempty?【发布时间】：2020-02-0512:56:00【问题描述】：PySide2/PyQtQListWidget为空时如何设置居中占位文字？当QListWidget的项目为零时... 查看详情

如何在 Django Admin 的搜索框中添加占位符文本？

】如何在DjangoAdmin的搜索框中添加占位符文本？【英文标题】：HowtoaddplaceholdertexttosearchboxinDjangoAdmin?【发布时间】：2017-07-0916:10:15【问题描述】：我在admin.py文件中定义了一堆ModelAdmin实例，其中许多都使用search_fields参数。但是，... 查看详情

无法使用占位符和 ng-model 输入文本字段（仅在 safari 中）

】无法使用占位符和ng-model输入文本字段（仅在safari中）【英文标题】：Can\'ttypeintextfieldwithplaceholderandng-model(onlyinsafari)【发布时间】：2016-06-2912:21:54【问题描述】：当我在第一个字段中输入文本时，文本会显示出来。使用选项卡... 查看详情

如何更改 UISearchBar 占位符和图像色调颜色？

】如何更改UISearchBar占位符和图像色调颜色？【英文标题】：HowtochangeUISearchBarPlaceholderandimagetintcolor?【发布时间】：2015-06-0505:00:57【问题描述】：我已经尝试了几个小时的搜索结果，但我无法弄清楚这一点。也许这是不可能的。... 查看详情

如何将占位符文本添加到 ToolStripTextBox？

】如何将占位符文本添加到ToolStripTextBox？【英文标题】：HowtoaddplaceholdertexttoToolStripTextBox?【发布时间】：2018-11-2719:35:55【问题描述】：在WinForms项目中，我知道如何将placeholdertext添加到常规文本框。但ToolStripTextBox似乎不是常规... 查看详情

powerpoint2010占位符

PPT的占位符在我们制作模板给公司或者自己使用的时候，有一个很方便的地方，就是他规定好了位置大小以及格式。首先我们新建一份PPT之后，在上方的菜单栏找到视图，在视图里面找到母版点击“母版”，然后可以看到有个“... 查看详情

使文本字段背景透明，但占位符文本不透明

】使文本字段背景透明，但占位符文本不透明【英文标题】：Havingtextfieldbackgroundtransparent,butplaceholdertextopaque【发布时间】：2017-10-0423:51:18【问题描述】：是否可以让文本字段的占位符文本不透明而其背景设置为透明，例如。如... 查看详情

如何对占位符应用不同的颜色并输入文本框值？

】如何对占位符应用不同的颜色并输入文本框值？【英文标题】：HowtoapplydifferentcolorstoPlaceholderandinputtextboxvalue?【发布时间】：2014-03-2210:34:23【问题描述】：我正在为InternetExplorer9(IE9)使用http://jamesallardice.github.io/Placeholders.js/placeh... 查看详情

powerpoint中可输入文本的工具

...考技术A具体操作步骤如下。在PowerPoint中，用户可以使用占位符或文本框在幻灯片中输入文本，输入文本后可利用“开始”选项卡的“字体”组或“绘图工具格式”选项卡设置其格式。将光标移至占位符四周控制点（此时光标显... 查看详情

文本框的占位符警告

】文本框的占位符警告【英文标题】：Placeholderwarningfortextbox【发布时间】：2015-12-1506:09:53【问题描述】：在文本框中添加占位符在VisualStudio中显示为警告<asp:TextBoxID="name"CssClass="form-control"runat="server"placeholder="e.g.JohnDoe"></asp... 查看详情

清除 TextField 时如何恢复占位符文本

】清除TextField时如何恢复占位符文本【英文标题】：HowtorestoreplaceholdertextwhenTextFieldiscleared【发布时间】：2020-01-1712:24:55【问题描述】：在清除TextField后，我在恢复TextField上的占位符文本时遇到问题。除了我在这里找到的方法之... 查看详情

如何删除 JavaScript 中的占位符文本？ [复制]

】如何删除JavaScript中的占位符文本？[复制]【英文标题】：HowtoremoveplaceholdertextinJavaScript?[duplicate]【发布时间】：2021-03-3105:34:36【问题描述】：我编写了一些代码来删除输入占位符文本，它按预期工作。我遇到的问题是如何在占... 查看详情