摘要：需求一個(gè)下拉列表，有還有從設(shè)計(jì)拿來(lái)的向下的箭頭。擠出文檔流做法有點(diǎn)惡心，不考慮擋住的話，那就無(wú)法做到點(diǎn)擊的時(shí)候出發(fā)的點(diǎn)擊事件除非用所以，讓變成透明。

一個(gè)select下拉列表，有border, bg, 還有從設(shè)計(jì)拿來(lái)的向下的箭頭。當(dāng)點(diǎn)擊的時(shí)候能有下拉列表。
大概UI如下

需要的dom有三個(gè)

div ----> 作用：定位置，設(shè)置背景樣式，包括border

select ----> 作用：點(diǎn)擊時(shí)，彈出的下拉選項(xiàng)

span -----> 作用：顯示字

dom具體是：

    
    
    
實(shí)際上的思路是這樣的：select原來(lái)有個(gè)固有的下拉箭頭，想要讓它消失，方法有三種：一種擠出文檔流，一種擋住，另一種則是讓select變成透明。
擠出文檔流做法有點(diǎn)惡心，不考慮
擋住的話，那就無(wú)法做到點(diǎn)擊的時(shí)候出發(fā)select的點(diǎn)擊事件（除非用js）
所以，讓select變成透明。
要實(shí)現(xiàn)點(diǎn)擊，那么實(shí)際上的dom層次由底到上依次是：div => span => select
所以需要設(shè)置z-index，給select設(shè)置z-index  = 2, span 的z-index = 1
然后div設(shè)置relative, span和select設(shè)置absolute，讓兩者重合
其中只有div有背景，span和 select都沒(méi)有背景且select的opacity設(shè)為0（即透明）。
現(xiàn)在你知道了，
用戶看到背景顏色,border是div的， 看到的字是span的,點(diǎn)擊的是select，select透明，置于span之上
Talk is cheap, show me the code
這里用了react的一個(gè)包，簡(jiǎn)潔明了，有興趣可以去了解下
const Selectsection = styled.div`
  position:relative;
  background:linear-gradient(#F8F8F8, #FDFDFD 30%, #E8E8E8);
  width:300px;
  height:30px;
  float:left;
  border:1px solid #ececec;
  border-radius:4px;
  margin:15px 0 0 15px;

  > select {
    width:300px;
    height:30px;
    padding-left: 15px;
    position:absolute;
    font: 14px Arial;
    z-index:2;
    opacity:0;
  }

  > span {
    width:300px;
    height:30px;
    position:absolute;
    text-align: left;
    font: 14px Arial;
    cursor: pointer;
    z-index:1;
    text-indent:20px;
    padding-top:6px;
  }

  > div {
    background:url(${arrow}) 0 0 no-repeat;
    width:24px;
    height:24px;
    position:absolute;
    top:7px;
    right:15px;
  }
`

class App extends Component {
  render() {
    return (
        
            
              Please select one option...
              ...
              ...
            
            Please select one option...
            

        
    );
  }
}

export default App;

background:linear-gradient(#F8F8F8, #FDFDFD 30%, #E8E8E8);

設(shè)置背景顏色漸變---再也不用切背景圖啦！mb當(dāng)年bg_*.png這種圖真的切多了

這里沒(méi)有例子，但是做項(xiàng)目的時(shí)候遇到，具體是有一張圖，包含了“黑，灰，紅”三色的箭頭
具體長(zhǎng)寬是(12+12+12 )*12，靠你們自己腦補(bǔ)了。

雪碧圖的運(yùn)用在第四象限，即如上例，應(yīng)用第一個(gè)箭頭，則創(chuàng)建一個(gè)div，長(zhǎng)寬為12*12，運(yùn)用的樣式為：

background:url(${arrow}) 0 0 no-repeat;

如要運(yùn)用第二個(gè)箭頭，那么運(yùn)用的樣式為：

background:url(${arrow}) 0 -24px no-repeat;

自行類推

holy shit差點(diǎn)忘了俺自己的土村方法，不過(guò)挺有意思的。

dom仍舊是：

    
    
    
不同在于，div沒(méi)有bg, border的功能，僅有作為定位的功能，bg, border移到span中去，即

div ----> 作用：定位置

select ----> 作用：點(diǎn)擊時(shí)，彈出的下拉選項(xiàng)

span  -----> 作用：顯示字，設(shè)置bg, border樣式


那么會(huì)問(wèn)了，span在前，你點(diǎn)擊的時(shí)候，點(diǎn)的是span而不是selet，那么如何在不適用js的情況下，出發(fā)用戶click select的效果呢？
這里有個(gè)樣式：
pointer-events:none;
將這個(gè)樣式apply給span，同時(shí)span與select完全貼合覆蓋（width, height, 字體大小, indent），當(dāng)點(diǎn)擊span的時(shí)候，就會(huì)穿透點(diǎn)擊select
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         云服務(wù)器
                                             
                         GPU云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               大數(shù)據(jù)積累
                                                                                                           section?
                                                                                                           sections
                                                                                                           section
                                                         
                 
               
              
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112711.html
               
                      
               

                 
                                  
上一篇：CSS3學(xué)習(xí)小結(jié)
  
                                                
                                       
下一篇：聊聊為什么淘寶要提出「雙飛翼」布局
                                  
              
              

                
相關(guān)文章
                

                             
                                                                    

                                                

                          
UI 積累之select section
                                                     
摘要：需求一個(gè)下拉列表，有還有從設(shè)計(jì)拿來(lái)的向下的箭頭。擠出文檔流做法有點(diǎn)惡心，不考慮擋住的話，那就無(wú)法做到點(diǎn)擊的時(shí)候出發(fā)的點(diǎn)擊事件除非用所以，讓變成透明。

需求
一個(gè)select下拉列表，有border, bg, 還有從設(shè)計(jì)拿來(lái)的向下的箭頭。當(dāng)點(diǎn)擊的時(shí)候能有下拉列表。大概UI如下
showImg(https://segmentfault.com/img/bVYtOK?w=496&h=81);...
                                                   
                          

                                

                                    monw3c
                                    2019-08-21 17:36
                                    評(píng)論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
UI 積累之select section
                                                     
摘要：需求一個(gè)下拉列表，有還有從設(shè)計(jì)拿來(lái)的向下的箭頭。擠出文檔流做法有點(diǎn)惡心，不考慮擋住的話，那就無(wú)法做到點(diǎn)擊的時(shí)候出發(fā)的點(diǎn)擊事件除非用所以，讓變成透明。

需求
一個(gè)select下拉列表，有border, bg, 還有從設(shè)計(jì)拿來(lái)的向下的箭頭。當(dāng)點(diǎn)擊的時(shí)候能有下拉列表。大概UI如下
showImg(https://segmentfault.com/img/bVYtOK?w=496&h=81);...
                                                   
                          

                                

                                    Alliot
                                    2019-08-01 17:59
                                    評(píng)論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                                                       

                                                

                          
組件化思路：以selection為例子，使用prop-types實(shí)現(xiàn)組件化控制，重用
                                                     
摘要：如何只開(kāi)發(fā)一個(gè)組件就滿足這個(gè)無(wú)理要求呢第一只老虎顯示內(nèi)容我們的是這樣的具體實(shí)現(xiàn)，通過(guò)的倒是能很簡(jiǎn)單實(shí)現(xiàn)。怎么做呢，這就要引入一個(gè)包，叫了，定義屬于這個(gè)組件的變量，然后將其運(yùn)用到組件的每個(gè)的上。接下來(lái)以上述為例子。

需求
書(shū)接上文，UI 積累之select section
這里又來(lái)兩個(gè)需求了。

當(dāng)我點(diǎn)擊選擇了option后，我應(yīng)該看到的是我選擇的option的內(nèi)容
多例重用，即同樣是個(gè)...
                                                   
                          

                                

                                    you_De
                                    2019-08-21 17:38
                                    評(píng)論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
組件化思路：以selection為例子，使用prop-types實(shí)現(xiàn)組件化控制，重用
                                                     
摘要：如何只開(kāi)發(fā)一個(gè)組件就滿足這個(gè)無(wú)理要求呢第一只老虎顯示內(nèi)容我們的是這樣的具體實(shí)現(xiàn)，通過(guò)的倒是能很簡(jiǎn)單實(shí)現(xiàn)。怎么做呢，這就要引入一個(gè)包，叫了，定義屬于這個(gè)組件的變量，然后將其運(yùn)用到組件的每個(gè)的上。接下來(lái)以上述為例子。

需求
書(shū)接上文，UI 積累之select section
這里又來(lái)兩個(gè)需求了。

當(dāng)我點(diǎn)擊選擇了option后，我應(yīng)該看到的是我選擇的option的內(nèi)容
多例重用，即同樣是個(gè)...
                                                   
                          

                                

                                    cgspine
                                    2019-08-01 18:01
                                    評(píng)論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
組件化思路：以selection為例子，使用prop-types實(shí)現(xiàn)組件化控制，重用
                                                     
摘要：如何只開(kāi)發(fā)一個(gè)組件就滿足這個(gè)無(wú)理要求呢第一只老虎顯示內(nèi)容我們的是這樣的具體實(shí)現(xiàn)，通過(guò)的倒是能很簡(jiǎn)單實(shí)現(xiàn)。怎么做呢，這就要引入一個(gè)包，叫了，定義屬于這個(gè)組件的變量，然后將其運(yùn)用到組件的每個(gè)的上。接下來(lái)以上述為例子。

需求
書(shū)接上文，UI 積累之select section
這里又來(lái)兩個(gè)需求了。

當(dāng)我點(diǎn)擊選擇了option后，我應(yīng)該看到的是我選擇的option的內(nèi)容
多例重用，即同樣是個(gè)...
                                                   
                          

                                

                                    edagarli
                                    2019-08-29 13:49
                                    評(píng)論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
發(fā)表評(píng)論
                   

                                      
                      

                        登陸后可評(píng)論
                      
                   
               
              

                

                  
0條評(píng)論
   
                
 
                      

              
           
           

              
 
                

                    
                    
liaosilzu2007
                    
男|高級(jí)講師
                    

                     
                                                                      我要關(guān)注
      
                                                                                        我要私信
                     
                                            
                    
                    

                          
TA的文章
                          閱讀更多
                    
                      

                                                  
Python基礎(chǔ)之控制結(jié)構(gòu)
                            
閱讀 3417·2021-11-25 09:43
                                                       
2021-09-05_user_defined_data_types(自定義數(shù)據(jù)類型)
                            
閱讀 2300·2021-09-06 15:02
                                                       
FxTransit：$28.5/季/1GB內(nèi)存/10GB SSD硬盤(pán)/1TB流量/500Mbps-1
                            
閱讀 3546·2021-08-18 10:21
                                                       
Angular2 模塊簡(jiǎn)介
                            
閱讀 3345·2019-08-30 15:55
                                                       
厭倦了寫(xiě)活動(dòng)頁(yè)？快來(lái)擼一個(gè)頁(yè)面生成器吧！
                            
閱讀 2352·2019-08-29 17:06
                                                       
頁(yè)面布局 - flex彈性布局
                            
閱讀 3538·2019-08-29 16:59
                                                       
UI 積累之select section
                            
閱讀 968·2019-08-29 13:47
                                                       
react 移動(dòng)端 兼容性問(wèn)題和一些小細(xì)節(jié)
                            
閱讀 2764·2019-08-26 13:24
                                                
                      
                

                   
              
  

                  
最新活動(dòng)
 
           
         

                    

                      

                                                                                                                       

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              



                                
              
           
        
       
    
    
     

      
    
    
    

    
       
       

         
閱讀需要支付1元查看
  
         
支付并查看
     
       
      
  
    
    













<