0

我要做的是制作一个输入字段并将其放在页面中心。我设法做到了这一点，但它看起来像一个输入框在另一个之上，它没有注意我给它的样式规则。这是它的样子：

屏幕截图

很明显，黑色和灰色的框应该是输入框。

这是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和东西放进去，因为我只是想解决这个问题。

4

5 回答 5

0

You need this: 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;
}

Screen capture:

enter image description here

于 2013-08-17T02:35:48.447 回答
0

不要为输入框的外观使用单独的 div。

用这个：

input
{
     //put the styling in here
}
于 2013-08-16T23:48:47.147 回答
0

您将样式应用于 a <div>，而不是实际的<input>. 把它想象<div>成一个容器，里面有你的身体和输入。（顺便说一句，<body>应该包含页面上显示的所有内容，而不是包含在<html>标签之外的任何内容中）。

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

于 2013-08-16T23:49:17.147 回答
0

您可以使用 CSS 解决该问题，如下所示：

input{
   /*My CSS Code*/
}

但是不建议这样做，因为您input type="submit"也会遇到问题，因为您将在按钮上进行文本框设计。

这是更流行和更具体的编辑方式input type="text"

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

如您所知，它可以用于type="password", type="submit"等。

于 2013-08-16T23:52:59.193 回答
0

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

据我了解，您希望您的输入框位于页面的中心。您在那里的 css 类 .abs-centered 告诉布局引擎将一个框相对于他的父级居中。

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

http://pastebin.com/psHz0psB

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

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

希望有帮助！

于 2013-08-17T00:15:50.777 回答