input.submit上的僞元素

我非常關注一些用僞元素製作小CSS三角形的技巧。input.submit上的僞元素

我將這些成功應用於標題（和鏈接 - 查看此處;查看此處; http://culturecuts.co.uk），但是當我然後嘗試對註冊表單執行相同操作時，我無法獲取三角形進行呈現？

就在同一鏈接的底部，您將看到我的註冊表單，而且沒有三角形！幾個小時一直在撓我的頭！

HTML看起來像這樣：

<p>Name <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-text wpcf7-validates-as-required name" size="10" /></span> Email <span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-text wpcf7-validates-as-email wpcf7-validates-as-required email" size="10" /></span> <input type="submit" value="Subscribe" class="wpcf7-submit submit" />

CSS是這樣的：

#wpcf7-f1967-t1-o1 { 
    position: relative; 
    display: block; 
    background: #FFF; 
    padding: 0 0 0 4px; 
    line-height: 31px;  
    } 
    #wpcf7-f1967-t1-o1 p { 
     margin: 0; 
     line-height: 31px; 
     position: relative; 
     } 
    .wpcf7-submit.submit { 
     float: right; 
     position: relative; 
     font-size: 10pt; 
     padding: 0 10px; 
     background: #1C5357; 
     color: #FFF; 
     border-style: none; 
     border-left: 5px solid #F4F4F4; 
     line-height: 31px; 
     cursor: pointer; 
     font-family: Georgia, "Times New Roman", Times, serif; 
     text-transform: uppercase; 
     font-size: 8pt; 
     -webkit-transition: padding 0.1s linear; 
     -moz-transition: padding 0.1s linear; 
     -ms-transition: padding 0.1s linear; 
     -o-transition: padding 0.1s linear; 
     } 
     .wpcf7-submit.submit:hover { 
      padding: 0 14px; 
      background: #9FB1BF; 
      } 
    .wpcf7-submit.submit:before, 
    .wpcf7-submit.submit:after { 
     content: ""; 
     position: absolute; 
     top: 50%; 
     width: 0; 
     height: 0; 
     } 
    .wpcf7-submit.submit:before { 
     left: -12px; 
     border-top: 8px solid transparent; 
     border-bottom: 8px solid transparent; 
     border-right: 8px solid #F4F4F4; 
     margin-top: -8px; 
     } 
    .wpcf7-submit.submit:after { 
     left: -5px; 
     border-top: 6px solid transparent; 
     border-bottom: 6px solid transparent; 
     border-right: 6px solid #1C5357; 
     margin-top: -6px; 
     } 
     .wpcf7-submit.submit:hover:after { 
      border-right-color: #9FB1BF; 
      }

來源

2011-12-22 Infocentre

的可能重複的[CSS：上INPUT字段僞元件後（http://stackoverflow.com/questions/2587669/css-after -pseudo-element-on-input-field） –

早就想到在同一個問題上花了很長時間，認爲它必須是我的代碼錯了。 –

你可以看到爲什麼這不會通過閱讀鏈接「可能重複」工作：

Can I use the :after pseudo-element on an input field?

但是，您的情況有一個解決方法：

變化：

<input type="submit" value="Subscribe">

到：

<button type="submit">Subscribe</button>

來源

2011-12-22 13:22:28

如果我能控制html輸出，將會有解決辦法！該表格由WP上的聯繫表格7運行...無賴！ – Infocentre

你可以編輯插件，只要確保你保存爲一個不同的名稱/文件夾，以避免被更新覆蓋並考慮版權影響。 - 也將修改反饋給插件所有者作爲對他們的推薦 – ChelseaStats

input.submit上的僞元素

回答

相關問題