Question

我想在html中为输入框创建css。我对css知之甚少可以解决我的小问题。我希望所有输入框都有不同的风格和大小。希望html代码没有变化。

<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large" value="" type="text">
</div>
</div>

<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large" value="" type="text">
</div>
</div>

<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]" class="vp-input input-large" value="" type="text">
</div>
</div>

Answer 1

您需要添加外部样式表，如下所示：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/path/to/css.css" />
</head>
<body>
    <!-- content -->

然后在你的样式表中你可以像这样定位元素：

. = class和# = id。 e.g。

<input type="text" id="myId" class="myClass" />

然后在你的css中，你可以像这样定位输入：

#myId    {color: #f00}
.myClass {color: #000}

需要注意的事项：除非!important规则正在发挥作用，否则ID具有更高的优先级权重并将取代类样式。但是要谨慎使用，因为它可能会破坏样式表的行为。

Answer 2

参考以下示例编写CSS。

<html>
  <head>
      <style>
        input {
          width: 100%;
          box-sizing: border-box; }
     </style>
 </head>
</html>

将此脚本放在head的{{1}}标记中。

Answer 3

＆＃13;

.input-element-1{
   width:300px;
}
.input-element-2{
   width:200px;
}

＆＃13;

<div class="field">
<div class="input1">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large input-element-1" value="" type="text">
</div>
</div>

<div class="field1">
<div class="input2">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large input-element-2" value="" type="text">
</div>
</div>

＆＃13;

Answer 4

无需更改html。

您可以在attribute selector

中使用通配符

根据MDN

[attr * = value]表示属性名为attr的元素其值至少包含一个字符串“value”的出现次数串。

由于您的输入具有不同的名称属性，我们可以将其作为目标。

输入的名称是

post_rehub_offers[rehub_multioffer_group][0][multioffer_url]
post_rehub_offers[rehub_multioffer_group][0][multioffer_name]
post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]

所以我们可以定位

input[name*="url"]
input[name*="name"]
input[name*="desc"]

然后像这样应用你想要的任何风格：

input[name*="url"] {background:red}
input[name*="name"] {background:green}
input[name*="desc"] {background:blue}

<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large" value="" type="text">
</div>
</div>

<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large" value="" type="text">
</div>
</div>

<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]" class="vp-input input-large" value="" type="text">
</div>
</div>

输入属性选择器的CSS

4 个答案: