Question

我正在处理 CSS / HTML 项目，但是文本字段的边框有问题。在浏览器中，边框短于文本字段。

我尝试更改边框的大小以适合文本字段，并且可以正常工作，但是我尝试在更大的屏幕上打开浏览器（IE），但我又遇到了同样的问题。

这是我的代码：

<tr>
  <td>First Name</td>
  <td>
    <div style="border:4px #26a570 solid;
			            background-color:white; 
						width:37.5%; 
						height:15%">
      <input type="text" name="txtFirst" id="txtFirst" />
    </div>
  </td>
</tr>

我希望边框能够缩放到所有浏览器和屏幕中文本框的大小。

Answer 1

首先像提到的@Nimsrules一样，将您的边框放在输入周围。其次使用视口。这将使其可扩展。您的视口必须位于头部。除了使用％之外，还可以使用vw来设置宽度，而使用vh来设置高度。

示例

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<tr>
    <td>First Name
</td>
    <td>
<div > 
    <input type="text" name="txtFirst" id="txtFirst" style="border:4px #26a570
 solid;background-color:white; width:37.5vw; height:15vh"/>
</div>
</td>
  </tr>

Fiddle

在这里您可以了解有关viewports的更多信息。

我也不建议内嵌CSS。最好使用css文件。阅读this了解更多信息，为什么不建议这样做。

Answer 2

您需要在输入元素上设置样式

它不起作用，因为您也将width:37.5%;设置为父对象。

  <table>
  
  <tr>
    <td>First Name
</td>
    <td>
<div> 
    <input style="width: 200px; border:4px #26a570
 solid;background-color:white; height:15%" type="text" name="txtFirst" id="txtFirst" />
</div>
</td>
  </tr>
  </table>

Answer 3

您可以在输入字段中设置边框，然后在IE上进行检查。

如果它不起作用，请尝试 破坏已应用的边框CSS

边框颜色：灰色；

和

border-style：solid;

您可以尝试使用此方法来代替单一标记。

希望它能起作用！

Answer 4

嗨，首先，编写内联样式很不好，因为编辑可能很麻烦。您应该设置一个类并在CSS文件中编写样式：）

这是您的HTML

<table>
  <tr>
    <td>First Name</td>
    <td>
      <div> 
          <input class="input-wrapper" type="text" name="FirstName" />
      </div>
    </td>
  </tr>
</table>

这是您的CSS

input.input-wrapper{
  border:5px solid green;
}

这是您的INLINE风格

<input style="border:5px solid green;" type="text" name="FirstName" />

如何使文本字段的边界缩放以适合CSS中文本字段的大小

4 个答案: