Question

是否可以使用CSS将html组件的宽度（比如文本字段）增加一定百分比的当前宽度。

例如：当前宽度= 10px; 新宽度应为当前宽度* 2.

我们可以用css实现这个吗？

Answer 1

如果我理解你的问题，那就不可能只用css。当用户专注于字段

时，你唯一可以做的是扩大你的领域

像这里例如css： plunker

input[type=text] {


width: 100px;
  height:20px;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
}
input[type=text]:focus {
  width: 250px;
  height:100px;
}

和html：

    <!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
  Search: <input type="text" name="search">
  </body>

</html>

如果您想要放大文本字段，如果用户点击按钮或类似的东西，您必须使用javascript。但这并不难。

获取特定组件的宽度，并使用css将其宽度增加当前宽度的某个百分比

1 个答案: