两个不同布局的相同CSS

Question

给出一个无法修改的html页面。我唯一的访问权限是CSS。 页面通过来自其他域的iframe加载和显示。

这实际上是一个支付网关，它显示已保存的卡或显示添加新卡的输入字段。为此，它使用具有相同属性的相同输入字段。 （疯了，我同意）

因此页面可能会显示2个状态：

1）表格字段已预设：卡已保存，值不为空，选择已选择选项。已保存的卡片：https://jsfiddle.net/z0db0wL7/1/

2）表单字段为空/未设置：值为空并准备输入，选择选择一个第一个选项。新卡：https://jsfiddle.net/j1b6fzc4/

<form id="my_form" method="post" .... >
    <div class="wrapper">
        <input type="text" id="firstname" class="firstname" name="FirstName" value="Test" required="">
        <input type="text" id="lastname" class="lastname" name="LastName" value="Test2" required="">
        <input type="text" id="cardnumber" class="cardnumber" name="CardNumber" value="" placeholder="Visa ending in 1111" required="">

        <select id="exp_month" class="exp_month" name="ExpirationMonth" required="">
            <option value="">&lt;Select One&gt;</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option selected>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
        </select>

        <select id="exp_year" class="exp_year" name="ExpirationYear" required="">
            <option value="">&lt;Select One&gt;</option>
            <option>2017</option>
            <option>2018</option>
            <option selected>2019</option>
            <option>2020</option>
            <option>2021</option>
            <option>2022</option>
            <option>2023</option>
        </select>

    </div>
</form>

所有类别/ ID等都相同，唯一的区别是：输入类型=＆＃34;文本＆＃34; 和默认（顶部）选项的空值在选择元素。

当预设卡时，我试图假装后面没有输入元素（已实现）。

如果未保存卡，则样式将恢复正常。除了 select 元素之外，所有工作都有效，因为我找不到检查它的方法。

任何想法如何实现？任何评论都将受到高度赞赏。

Answer 1

诀窍是使用选择器的组合。您希望#exp_month选择仅在填写了值时（即用户已进行选择）才具有只读外观，并且#cardnumber输入具有其value属性设置（即提交后） 所以你需要的选择器是

#cardnumber:not([value='']) ~ .exp_month:valid

然后空表格看起来像

.firstname, .lastname, .cardnumber, .exp_month, .exp_year {
	background-color:transparent;
	border:none!important;
	font-weight:400!important;
	pointer-events:none;
  display: block;
}

::-webkit-input-placeholder {
	color:#000;
}
#cardnumber:not([value='']) ~ #exp_month:valid,
#cardnumber:not([value='']) ~ #exp_year:valid {
	-moz-appearance:none;
	-webkit-appearance:none;
	text-indent:1px;
	text-overflow:'';
}
.mvp_exp_month::-ms-expand, .mvp_exp_year::-ms-expand {
	display:none;
}
input[value=''] {
	background-color:#fff!important;
	border: 1px solid #000!important;
	pointer-events:all!important;
}
input:placeholder-shown {
	background-color:transparent!important;
	border:none!important;
	pointer-events:none!important;
}

input, select {margin-top: 5px;}

<form id="my_form" method="post" .... >
    <div class="wrapper">
        <input type="text" id="firstname" class="firstname" name="FirstName" value="" required="">
        <input type="text" id="lastname" class="lastname" name="LastName" value="" required="">
        <input type="text" id="cardnumber" class="cardnumber" name="CardNumber" value="" placeholder="Visa ending in 1111" required="">

        <select id="exp_month" class="exp_month" name="ExpirationMonth" required="">
            <option value="" selected>&lt;Select One&gt;</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
        </select>

        <select id="exp_year" class="exp_year" name="ExpirationYear" required="">
            <option value="" selected>&lt;Select One&gt;</option>
            <option>2017</option>
            <option>2018</option>
            <option>2019</option>
            <option>2020</option>
            <option>2021</option>
            <option>2022</option>
            <option>2023</option>
        </select>

    </div>
</form>

，填写的表格如下所示：

.firstname, .lastname, .cardnumber, .exp_month, .exp_year {
	background-color:transparent;
	border:none!important;
	font-weight:400!important;
	pointer-events:none;
  display: block;
}

::-webkit-input-placeholder {
	color:#000;
}
#cardnumber:not([value='']) ~ #exp_month:valid,
#cardnumber:not([value='']) ~ #exp_year:valid {
	-moz-appearance:none;
	-webkit-appearance:none;
	text-indent:1px;
	text-overflow:'';
}
.mvp_exp_month::-ms-expand, .mvp_exp_year::-ms-expand {
	display:none;
}
input[value=''] {
	background-color:#fff!important;
	border: 1px solid #000!important;
	pointer-events:all!important;
}
input:placeholder-shown {
	background-color:transparent!important;
	border:none!important;
	pointer-events:none!important;
}

input, select {margin-top: 5px;}

<form id="my_form" method="post" .... >
    <div class="wrapper">
        <input type="text" id="firstname" class="firstname" name="FirstName" value="Test" required="">
        <input type="text" id="lastname" class="lastname" name="LastName" value="Test2" required="">
        <input type="text" id="cardnumber" class="cardnumber" name="CardNumber" value="4444-3333-2222-1111" placeholder="Visa ending in 1111" required="">

        <select id="exp_month" class="exp_month" name="ExpirationMonth" required="">
            <option value="">&lt;Select One&gt;</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option selected>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
        </select>

        <select id="exp_year" class="exp_year" name="ExpirationYear" required="">
            <option value="">&lt;Select One&gt;</option>
            <option>2017</option>
            <option>2018</option>
            <option selected>2019</option>
            <option>2020</option>
            <option>2021</option>
            <option>2022</option>
            <option>2023</option>
        </select>

    </div>
</form>

（注意：相同，只有不同的值和选择）

根据评论，不能总是使用~技巧。当输入与选择不同的div时，它们不再相邻 在这种情况下，我们可以使用这样一个事实：如果表单中的所有输入都是有效的，表单本身也可以获得:valid伪类（参见W3C）。你只需写

#my_form:valid #exp_month:valid,
#my_form:valid #exp_year:valid {

代替。
在缺点方面，这确实意味着行为发生了变化：它不会等待提交，而是在所有字段都正确填写后立即更改外观。还没有找到任何解决方法。