Question

我在我的网站中使用输入类型Submit标签。其value属性具有“提交”文本。我面临的问题是，当我将文本转换属性应用于输入标签时，文本也将变为斜体。我在互联网上做了一些搜索，但到目前为止找不到任何运气。我在下面粘贴了标记和样式。

#submit-button input[type=submit] {
background: #093f7d !important;
color: white !important;
-webkit-transform: skew(160deg);
-moz-transform: skew(160deg);
-o-transform: skew(160deg);
width: 19%;
font-size: 18px;

}

<input type="submit" value="Submit" class="wpcf7-form-control wpcf7-submit">

Answer 1

仅使用按钮而不是输入。将span元素放置在按钮内，然后反向倾斜span。我认为这是您想要的行为。

button {
background: #093f7d !important;
color: white !important;
transform: skew(160deg);
width: 19%;
font-size: 18px;
}

button span {
transform: skew(20deg);
display: block;
}

<button type="submit"><span>Submit</span></button>

Answer 2

使用按钮代替输入类型，并使用o表示按钮文本。倾斜按钮并倾斜文本。

#btn {
background: #093f7d !important;
color: white !important;
-webkit-transform: skew(160deg);
-moz-transform: skew(160deg);
-o-transform: skew(160deg);
width: 19%;
font-size: 18px;
}

#btn-text {
    -ms-transform: skewX(-160deg); /* IE 9 */
    -webkit-transform: skewX(-160deg); /* Safari */
    transform: skewX(-160deg);
    padding: 5px;
}

<button id="btn"><div id="btn-text">Submit</div></button>

输入类型提交值受CSS转换属性影响

2 个答案: