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

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

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

如圖實(shí)現(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猛點(diǎn)該文字，百度云盤下載

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/111131.html

相關(guān)文章

CSS開發(fā)

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

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

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

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

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

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

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

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

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

miqt 2019-08-29 14:12 評(píng)論0 收藏0