需要幫助CSS自定義Css皮膚中的Psuedo元素Telerik控件

因此，這裏是窮人，試圖將自定義CSS應用於RadTabStrip與以下CSS和HTML.Although雖然這是telerik控制，但問題是純粹的CSS/HTML。我正在設計Menubar，如下圖所示。需要幫助CSS自定義Css皮膚中的Psuedo元素Telerik控件

請注意，我不想使用RadTemplate，所以我不能在這裏更改DOM。

請看下面的代碼片段和圖像，以獲得有關問題的想法！

<div class="RadTabStrip_Custom"> 
    <div class="rtsLevel rtsLevel1"> 
     <ul class="rtsUL"> 
      <li class="rtsLI FirstChild"> 
       <span class="rtsLink"> 
        <span class="rtsTxt">Delivery Settings</span> 
       </span> 
      </li> 
      <li class="rtsLI rtsSelected selectedLI rtsClicked"> 
       <span class="rtsLink"> 
        <span class="rtsTxt">Pick a Template</span> 
       </span> 
      </li> 
      <li class="rtsLI LastChild rtsClicked"> 
       <span class="rtsLink"> 
        <span class="rtsTxt">Almost Done</span> 
       </span> 
      </li> 
     </ul> 
    </div> 
</div>

我已經使用::後::之前得到箭頭的效果，但事情是，當它被選中它應該只顯示與背景color.I邊界不整箭很失落在這裏，甚至試過::後（2）和::之前（2），但我從from here知道，它不支持在主要瀏覽器。我如何得到這種效果？

.RadTabStrip_Custom { 
    color: #000; 
    font: 12px "Segoe UI",Arial,Helvetica,sans-serif; 
    line-height: 26px; 
    background-color: #ffffff; 
    width: 100%; 
} 

.RadTabStrip_Custom .rtsUL { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 80%; 
    border: 0px solid red; 
} 

.RadTabStrip_Custom .rtsLI { 
    width: 20%; 
    overflow: visible !important; 
    position: relative; 
    left: 4px; 
} 

.RadTabStrip_Custom .rtsLI .rtsFirst { 
    overflow: hidden !important; 
} 

.RadTabStrip_Custom .rtsGhostTab { 
    border-color: #0f1d48; 
    border-radius: 5px; 
    color: #fff; 
    background-color: #324d92; 
} 

.RadTabStrip_Custom .rtsLI { 
    color: #fff; 
    font-size: 18px; 
    font-family: "Segoe UI",Arial,Helvetica,sans-serif; 
    margin-right: 1%; 
    background-color: #ffffff !important; 
    background-image: none !important; 
    color: #b7d6e8 !important; 
    padding: 9px; 
} 

.RadTabStrip_Custom .rtsLink, .RadTabStrip_Custom .rtsLink:hover { 
    background-color: #044666; 
    background-image: none; 
    color: #fff; 
    font-size: 18px; 
    font-family: "Segoe UI",Arial,Helvetica,sans-serif; 
    margin-right: 1%; 
    padding: 9px; 
} 

.RadTabStrip_Custom .rtsSelected .rtsLink, .RadTabStrip_Custom .rtsSelected .rtsLink:hover { 
    background-color: #ffffff; 
    background-image: none; 
    color: #b8d5e5; 
    font-size: 18px; 
    font-family: "Segoe UI",Arial,Helvetica,sans-serif; 
    margin-right: 1%; 
    padding: 9px; 
    border-top: 1px solid #b8d5e5; 
    border-bottom: 1px solid #b8d5e5; 
} 

.RadTabStrip_Custom .rtsLink::before { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    margin-top: -22px; 
    border-width: 22px 0 22px 16px; 
    border-style: solid; 
    border-color: #004466 #004466 #004466 transparent; 
    left: -7px; 
} 

.RadTabStrip_Custom .rtsLink::after { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    margin-top: -22px; 
    border-top: 22px solid transparent; 
    border-bottom: 22px solid transparent; 
    border-left: 16px solid #004466; 
    right: -5px; 
} 

.FirstChild .rtsLink { 
    border-left: 1px solid #b8d5e5; 
    border-top-left-radius: 3px; 
    border-bottom-left-radius: 3px; 
} 

.FirstChild .rtsLink::before { 
    content: ""; 
    border-width: 0; 
} 

.LastChild .rtsLink { 
    border-right: 1px solid #b8d5e5; 
    border-top-right-radius: 3px; 
    border-bottom-right-radius: 3px; 
} 

.LastChild .rtsLink::after { 
    content: "" !important; 
    border-top: 0 solid transparent; 
    border-bottom: 0 solid transparent; 
}

在這兩個圖像中都選擇了「選取模板」選項卡，不用擔心反色配色方案。

我有什麼設計到現在

我想設計

來源

2016-09-14 BakerStreet221

爲了實現這一目標（如果我理解你想做的事）什麼，你將不得不申請了：懸停上<li>但不在<span>。

這樣做，你將能夠在他們兩人做一些像使用僞元素：

li:hover:before { 
    //do my border-bottom stuff 
} 
li:hover .rtsLink:before { 
    //do my arrow stuff 
} 
li:hover .rtsLink:after { 
    //do my arrow stuff 
}

讓我知道這是否是你想要的，如果我不清楚是什麼。

來源

2016-09-14 13:49:34 Fahrenheit

我用::之前和之後::對於內跨越「rtsTxt」和它的工作... :)

.RadTabStrip_Custom .rtsSelected .rtsLink .rtsTxt ::

前

.RadTabStrip_Custom .rtsSelected .rtsLink ::之前

來源

2016-09-14 16:51:07 BakerStreet221

需要幫助CSS自定義Css皮膚中的Psuedo元素Telerik控件

回答

相關問題