Caixas para copiar texto. Aquela que esconde um pouco o texto...
Caixa de copiar texto com barra de rolagem:
<div class="caixa1">
<li1>www.arquivo.com/</li1>
<li2>file/</li2>
<li3>yocz/</li3>
<li4>Cantando_50_Cosas_Sobre_sin.rar/file</li4>
</div>
<style>
.caixa1{
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
width: 255px;
height:26px;
padding:6px;
color:#8B6969;
background:#EEB4B4;
margin-left: 30px;
margin-bottom: 12px;
border: 1px solid #e5e4e4;
}
li1{
margin-right:-4px;
background: #E3E4E8 ;
border-top: 1px solid #D0D5E0;
border-bottom: 1px solid #D0D5E0;
border-left: 1px solid #D0D5E0;
padding: 1px 1px 1px 1px;
font-family: Muli;
font-size: 13px;
color: #344985;
width: 125px;
}
li2{
margin-right:-3px;
background: #D8BFD8;
border-top: 1px solid #D0D5E0;
border-bottom: 1px solid #D0D5E0;
border-right: 1px solid #D0D5E0;
padding: 1px 0px 1px 0px;
font-family: Muli;
font-size: 13px;
color: #344985;
width:22px;
}
li3{
margin-right:-3px;
background:#FA8072;
border-top: 1px solid #D0D5E0;
border-bottom: 1px solid #D0D5E0;
border-right: 1px solid #D0D5E0;
padding: 1px 0px 1px 0px;
font-family: Muli;
font-size: 13px;
color: #344985;
width: 100%;
}
li4{
background:#FF8247;
border-top: 1px solid #D0D5E0;
border-bottom: 1px solid #D0D5E0;
border-right: 1px solid #D0D5E0;
padding: 1px 0px 1px 0px;
font-family: Muli;
font-size: 13px;
color: #344985;
width: 100%;
}
/* Barra de rolagem
----------------------------------------------- */
::-webkit-scrollbar {
width: 13px;
height:6px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(227,145,0,.5);
border:4px solid #f7f7f7;
border-top:2px solid #f7f7f7;
border-bottom:2px solid #f7f7f7;
cursor:pointer;
border-radius: 1px;
}
::-webkit-scrollbar-track {
background: #014fa2;
border: 6px solid #f7f7f7;
border-top:px 5solid #f7f7f7;
border-bottom:5px solid #F8F8F8;
}
</style>
_______________________
Barra sem barra de rolagem:
<input class="input form-control mt-5 mb-5" value="Press Copy to copy this text"></input>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.2/solar/bootstrap.min.css">
Nenhum comentário:
Postar um comentário