添加滾動條時箭頭消失的css框

-1

在suedo元素之前和之後，我在CSS生成的框的頂部中間有一個箭頭。但是，當我將overflow-y:scroll;添加到框時，由css生成的箭頭消失。添加滾動條時箭頭消失的css框

FIDDLE： http://jsfiddle.net/aaronmallen/FP5jr/

CSS：

#notesdisplay { 
    position: relative; 
    background: #E8E8E8 ; 
    border: 3px solid #000000; 
    display: box; 
    max-width: 500px; 
    max-height: 200px; 
    padding: 25px; 
} 
#notesdisplay:after, #notesdisplay:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

#notesdisplay:after { 
    border-color: rgba(255, 255, 255, 0); 
    border-bottom-color: #E8E8E8; 
    border-width: 10px; 
    left: 50%; 
    margin-left: -10px; 
} 
#notesdisplay:before { 
    border-color: rgba(21, 83, 132, 0); 
    border-bottom-color: #000000; 
    border-width: 14px; 
    left: 50%; 
    margin-left: -14px; 
} 

#notesdisplay2 { 
    position: relative; 
    background: #E8E8E8 ; 
    border: 3px solid #000000; 
    display: box; 
    max-width: 500px; 
    max-height: 200px; 
    padding: 25px; 
    overflow-y:scroll; 
} 
#notesdisplay2:after, #notesdisplay2:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

#notesdisplay2:after { 
    border-color: rgba(255, 255, 255, 0); 
    border-bottom-color: #E8E8E8; 
    border-width: 10px; 
    left: 50%; 
    margin-left: -10px; 
} 
#notesdisplay2:before { 
    border-color: rgba(21, 83, 132, 0); 
    border-bottom-color: #000000; 
    border-width: 14px; 
    left: 50%; 
    margin-left: -14px; 
}

來源

2013-11-01 rubberchicken

請顯示您的HTML結構。或者用這個問題創建一個jsfiddle。 – Bobby5193

投票並不解釋爲什麼？真的很不錯 – rubberchicken

http://jsbin.com/iCuNaC/1/edit - 你可以看看 – rubberchicken

做什麼舊金山Presencia有一個div所述包裹文字作品..

新的CSS：

#notestext { 
    width: 500px; 
    height: 200px; 
    overflow-y:scroll; 
} 
#notesdisplay { 
    position: relative; 
    background: #E8E8E8 ; 
    border: 3px solid #000000; 
    display: box; 
    max-width: 500px; 
    max-height: 200px; 
    padding: 25px; 
} 
#notesdisplay:after, #notesdisplay:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

#notesdisplay:after { 
    border-color: rgba(255, 255, 255, 0); 
    border-bottom-color: #E8E8E8; 
    border-width: 10px; 
    left: 50%; 
    margin-left: -10px; 
} 
#notesdisplay:before { 
    border-color: rgba(21, 83, 132, 0); 
    border-bottom-color: #000000; 
    border-width: 14px; 
    left: 50%; 
    margin-left: -14px; 
}

new html：

<div id="notesdisplay"><div id="notestext">TEXT</div></div>

來源

2013-11-02 01:37:32 rubberchicken

添加滾動條時箭頭消失的css框

回答

相關問題