gpt4 book ai didi

CSS :after used to make arrow for links not working for submit button

转载 作者:行者123 更新时间:2023-12-02 21:51:47 26 4
gpt4 key购买 nike

我使用了 CSS :after 选择器为我的链接创建了一个箭头。这工作正常,但现在我想做同样的事情来形成输入。

如果我在提交按钮上使用相同的类,则 :after 将被忽略,我假设是因为该元素不能包含其他其他元素。

如果我将该类应用于包含提交按钮的 div,那么它看起来不错,但实际提交按钮外部的箭头和填充不可单击。

这个问题有解决办法吗?

http://jsfiddle.net/jn7Vj/5/

.button-style {
background: -moz-linear-gradient(top, #02AD85, #019975);
background: -webkit-linear-gradient(top, #02AD85, #019975);
background: linear-gradient(top, #02AD85, #019975);
padding: 0.7em;
border-radius: 0.5em;
border-bottom: 4px solid #003E30;
box-shadow: 0 2px 0px #252D42;
font-size: 15px; //findme
margin-top: 15px;
display: inline-block;
margin-top: 10px; //findme
border-top: none;
border-right: none;
border-left: none;
color: white;
font-size: 12px;
}
.button-style:after {
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0.4em 0 0.4em 0.7em;
border-color: transparent transparent transparent #FFF;
margin-left: 0.75em;
}

.button-style input {
background: none;
border: none;
color: white;
font-size: 12px;
margin: 0;
padding: 0;
}


<a href="#" class="button-style">Here is a link</a>

<form class="webform-client-form" enctype="multipart/form-data" action="/cchetwood/4/contact" method="post" id="webform-client-form-4" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield" id="webform-component-full-name">

<input type="text" id="edit-submitted-preferred-times-to-contact-optional" name="submitted[preferred_times_to_contact_optional]" value="" size="60" maxlength="128" class="form-text">

<input type="submit" class="button-style" value="Submit">

<div class="button-style">
<input type="submit" value="Submit">
</div>


</form>

最佳答案

CSS after 伪元素不适用于输入字段 ( https://stackoverflow.com/questions/9840768/css-after-input-does-not-seem-to-work )。不幸的是,这里唯一的解决方案是在输入字段上添加三 Angular 形作为背景图像,或者用 divspan 之类的东西包围该字段,然后添加 after 该元素的选择器。

对于您的按钮,我建议将其从输入元素更改为 button,然后您可以对其应用 after 选择器。

编辑
再次阅读您的问题后,我不确定您是否想将三 Angular 形​​添加到文本输入中,但这里有一个 jsFiddle,其样式仅添加到按钮: http://jsfiddle.net/jn7Vj/9/

关于CSS :after used to make arrow for links not working for submit button,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18493765/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com