CSS實例篇--CSS3實現(xiàn)模擬select 以及其中的三角形

AlphaWatch 發(fā)布于2019-08-28 18:16 / 1293人閱讀

摘要：如圖實現(xiàn)這樣的效果代碼如下高級客戶經(jīng)理中級客戶經(jīng)理樣式代碼需要猛點該文字，百度云盤下載

如圖實現(xiàn)這樣的效果：

html代碼如下：

css樣式代碼：

.select-bg{
    display:block;
    width:200px;
    margin:0 auto;
    height: 30px;
    line-height: 37px;
    font-size: 13px;
    border:1px #0f7fc7 solid ;
    box-sizing:border-box;
    cursor: pointer;
    position: relative;
}

.select-bg:after{
    content:" ";
    position: absolute;
    right:6px;
    top:50%;
    margin-top:-5px;
    width:0px;
      height:0px;
      border-left:10px solid transparent;
      border-right:10px solid transparent;
      border-top:10px solid #0f7fc7;
    font-size:0px;
    line-height:0px
}

.select-green {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    outline: none;
    border: 0 none;
    position: relative;
    padding: 0 0 0 5px;
    width: 100%;
    color:#0f7fc7;
    font-weight: bold;
    background: none;
    background-color: transparent;
    font-size: 13px;
    z-index: 99;
    overflow: hidden;
}

需要demo猛點該文字，百度云盤下載

GPU云服務(wù)器云服務(wù)器瀏覽器對和css3的支持 css3 css3氣泡 css3動畫

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111131.html

相關(guān)文章

CSS開發(fā)

摘要：譯十六進(jìn)制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關(guān)于是一款進(jìn)行柵格布局的輔助工具，它讓開發(fā)者擺脫了冗雜的數(shù)學(xué)計算，同時降低了樣式與結(jié)構(gòu)的耦合程度。【譯】CSS 十六進(jìn)制顏色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃本文永久鏈接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 評論0 收藏0
css進(jìn)階

摘要：柵格系統(tǒng)用于處理頁面多終端適配的問題。它表示抓取對象以后拖放到另一個位置。目前，它是標(biāo)準(zhǔn)的一部分。精簡高效的命名準(zhǔn)則方法這篇文章發(fā)布于年月日，星期日，，歸類于相關(guān)。但是不會受到包含塊的限制，可能會溢出。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 float 屬性不由...

import. 2019-08-29 14:07 評論0 收藏0
SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現(xiàn)出多種樣式。可以讓屬性的變化過程持續(xù)一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 評論0 收藏0
CSS效果篇--純CSS+HTML實現(xiàn)checkbox的思路與實例

摘要：出于美化和統(tǒng)一視覺效果的需求，的自定義就被提出來了。這里對實現(xiàn)方法做個總結(jié)。實現(xiàn)思路純實現(xiàn)的主要手段是利用標(biāo)簽的模擬功能。個人建議用的和偽元素和是一個東西。向擁有鍵盤輸入焦點的元素添加樣式。向已被訪問的鏈接添加樣式。 checkbox應(yīng)該是一個比較常用的html功能了，不過瀏覽器自帶的checkbox往往樣式不怎么好看，而且不同瀏覽器效果也不一樣。出于美化和統(tǒng)一視覺效果的需求，chec...

qingshanli1988 2019-08-01 18:22 評論0 收藏0
CSS效果篇--純CSS+HTML實現(xiàn)checkbox的思路與實例

摘要：出于美化和統(tǒng)一視覺效果的需求，的自定義就被提出來了。這里對實現(xiàn)方法做個總結(jié)。實現(xiàn)思路純實現(xiàn)的主要手段是利用標(biāo)簽的模擬功能。個人建議用的和偽元素和是一個東西。向擁有鍵盤輸入焦點的元素添加樣式。向已被訪問的鏈接添加樣式。 checkbox應(yīng)該是一個比較常用的html功能了，不過瀏覽器自帶的checkbox往往樣式不怎么好看，而且不同瀏覽器效果也不一樣。出于美化和統(tǒng)一視覺效果的需求，chec...

miqt 2019-08-29 14:12 評論0 收藏0