盒陰影的文本框只有底部

我不是很熟悉的盒陰影，我想做出一個文本字段只底盒陰影對我的網站，這裏就是代碼的樣子：盒陰影的文本框只有底部

input[type="text"], input[type="email"], textarea{ box-shadow: 0 0 0 1.5px, 0 1px 0 rgba(0,0,0,0.08) inset}

此代碼生成文本字段和文本區域的全部陰影框，我只想要底部部分獲取陰影框，我已經看到box-shadow bootom solution但我沒有得到它該做什麼

來源

2016-07-29 Idham Choudry

嘗試下面的代碼，創建底部陰影用於輸入和textarea，並使用:focus而不是:active。

input[type="text"], input[type="email"], textarea{ 
border:none; 
box-shadow:1px 1px 10px 5px rgba(1,1,1,0.2); 
transition: 0.6s ease; 
} 

input[type="text"]:focus, input[type="email"]:focus, textarea:focus{ 
box-shadow:0px 10px 10px -8px rgba(1,1,1,0.8); 
}

input[type="text"], input[type="email"], textarea{ 
 
border:none; 
 
box-shadow:1px 1px 10px 5px rgba(1,1,1,0.2); 
 
transition: 0.6s ease; 
 
margin-bottom:50px; 
 
float:left; 
 
width:100%; 
 
height:20px; 
 
} 
 
textarea{ 
 
height:150px; 
 
} 
 
input[type="text"]:focus, input[type="email"]:focus, textarea:focus{ 
 
box-shadow:0px 10px 10px -8px rgba(1,1,1,0.8); 
 
}

<input type="text"> 
 
<input type="email"> 
 
<textarea></textarea>

來源

2016-07-29 04:06:02 frnt

感謝它的工作，但我想添加修改後的代碼，所以當textfield和textarea激活時，它們變成完整的shadowbox，但問題是我需要保持點擊狀態以便它們變滿，當我釋放它時，它返回只有bottom box shadow，但textarea只能處理文本字段，下面是代碼'input [type =「text」]：active，input [type =「email」]：active，textarea：active {0} shadow：0 0 0 1.5px，0 1px 0 rgba（0,0,0,0.08）inset; }' –

@Wallflower歡迎您，嘗試更新代碼。 – frnt

試試這個。我在CSS中發現這對How to make shadow on border-bottom?

div{ 
     -webkit-box-shadow:0px 1px 1px #de1dde; 
     -moz-box-shadow:0px 1px 1px #de1dde; 
     box-shadow:0px 1px 1px #de1dde; 
      } 
     <div>wefwefwef</div>

來源

2016-07-29 04:01:33

使用底部陰影

.one-edge-shadow { 
    -webkit-box-shadow: 0 8px 6px -6px black; 
     -moz-box-shadow: 0 8px 6px -6px black; 
      box-shadow: 0 8px 6px -6px black; 
}

來源

2016-07-29 04:01:39

此代碼將添加一個底部陰影在所有瀏覽器所有元素，

-webkit-box-shadow: 0px 11px 5px 0px rgba(0,0,0,0.75); 
-moz-box-shadow: 0px 11px 5px 0px rgba(0,0,0,0.75); 
box-shadow: 0px 11px 5px 0px rgba(0,0,0,0.75);

來源

2016-07-29 04:04:31

由於它的工作，但我想補充修改後的代碼，所以當文本框和文本區域活躍，他們成爲全太極拳，但問題是我需要保持我的點擊等等他們變滿了，當我釋放它時，它只返回到只有底部的盒子陰影，但textarea工作正常只有文本框，這裏是代碼'input [type =「text」]：active，input [type =「email」 ]：active，textarea：active {box} shadow：0 0 0 1.5px，0 1px 0 rgba（0,0,0,0.08）inset; }' –

盒陰影的文本框只有底部

回答

相關問題