Question

我要做的是创建一个输入字段并将其置于页面中心。我已经设法做到这一点，但它看起来像另一个上面的输入框，它没有注意我给它的样式规则。这是它的样子：

Screen capture

显然，黑色和灰色框应该是输入框。

这是HTML：

<style media="screen" type="text/css">
.styles{
   height:30px;
   width:286px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
   border: 1px solid #5E5E5E;
   padding:0 10px;
   background-color: #000000;
   color:#BFBFBF;
   outline: none;
   input-align: center;
}

.abs-centered {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
}
</style>
<div class="styles abs-centered">
<body bgcolor="#25383C">
<input name="name" type="password" placeholder="Password" autocomplete="off"/>
</div>

我还没有把html和body放进去，因为我只是想解决这个问题。

Answer 1

请勿对输入框的外观使用单独的div。

使用此：

input
{
     //put the styling in here
}

Answer 2

您将样式应用于<div>，而不是实际的<input>。将<div>视为一个容器，其中包含您的身体和输入。（另外，<body>应该包含页面上显示的所有内容，而不包含在<html>标记之外的任何内容中。

将样式应用于<input>元素，而不是<div>，您将获得所需的效果。

Answer 3

您可以使用CSS解决该问题，例如：

input{
   /*My CSS Code*/
}

但是不建议这样做，因为你还有input type="submit"会出现问题，因为你的按钮上会有文本框设计。

这是更受欢迎且更具体的方式来编辑input type="text"

input[type="text"]{
    /*My Code*/
}

正如您所知，它可以在type="password", type="submit"等中使用。

Answer 4

首先，你的HTML有点搞砸了。 <html>和<head>代码是强制性的，您的第一个<div>代码不能位于<body>代码之前，且必须关闭正文代码。它对你的问题没有太大的改变，但当你在html / css中尝试时，你必须确保有一个没有标记错误的代码，否则布局最终可能无法按预期呈现。

据我所知，您希望输入框在页面上居中。你在那里以css类.abs为中心告诉布局引擎将一个盒子相对于他父母居中。

在您的代码中，div类相对于页面（<body>）框居中。如果您希望输入为黑色和灰色，并且在页面上居中，则可以简单地删除div标记并将.abs居中和.styles类添加到输入标记。

http://pastebin.com/psHz0psB

如果要离开<div>框并使输入相对于它居中，则只需将.abs居中的类添加到输入中即可。然后，您的输入将以页面为中心的div为中心。

我认为你应该离开<div>，因为输入可以被视为内联元素而不是框，某些浏览器可能不会按预期处理样式。如果你只想设置样式输入元素，请从中删除.styles类，使其透明。

希望有所帮助！

Answer 5

你需要这个：DEMO

HTML：

<body bgcolor="#25383C">
  <div class="styles abs-centered">
    <input id="actual-input" name="name" type="password" placeholder="Password" autocomplete="off"/>
  </div>
</body>

CSS：

.styles{
        height:30px;
    width:286px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #5E5E5E;
    padding:0px 5px;
        background-color: #000000;
        color:#BFBFBF;
        outline: none;
        input-align: center;
}

.abs-centered {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
}

#actual-input{
  height:26px;
  padding:0px;
  width:100%;
  color:#fff;
  background-color:transparent;
  border:0px;
  outline-style:none;
}

截屏：

enter image description here

CSS / HTML错误，输入框内的输入框？

5 个答案: