html文本框无阴影,html无法设置textarea内边框阴影( 仍需要帮助)_html_开发99编程知识库...

嗯。"。"。這裡有很多東西，但我相信我可以能已經達到了你想要的結果( 你想要的文本，但我在假設你希望文本框包含邊框和與輸入欄位相同的的情況下，我不確定你想要什麼) 。 我相信這裡主要的問題主要是在層次基礎上。 因為如這裡，我們覺得在處理實際代碼之前應該有一些事情需要說明。 原則上，你應該對樣式表頂部和更具體的規則有更多的規則。 重置( 。原始元素，如 textarea，輸入，等等 ) 至少應該位於top--or中，上面 要應用於這些元素的類。

另外，我強烈建議你不要使用imporant 。 如果你發現你需要使用imporant，那通常意味著你的實際問題在別處。 它顯示你現在正在嘗試針對自然的CSS流來強制它覆蓋它的他內容。 當你需要重寫這個規則的時候？ 你必須編寫一個更具體的規則，整個事情都很快變成了一個混亂。

因這裡，為了熟悉起見，我已經採取了你的代碼並註釋出問題，並且為什麼它們阻止你。.form-control

{

color: #34495e;

/*border-color: transparent; Because of this, even if you had a border, you wouldn't be able to see it (assuming you didn't override it later). */

/*border: none!important; 1. Use of!important. 2. Your border isn't showing because this is explicitly telling it not to. */

/*border-bottom-width: 0px; You're getting rid of the bottom border. */

/*border-bottom: none; You're getting rid of the bottom border. */

font-size: 16px;

line-height: 1.467;

padding: 8px 12px 8px 66px;

height: 54px;

-webkit-appearance: none;

/*-webkit-box-shadow: none; Explicitly telling it not to have a box-shadow */

/* box-shadow: none; Explicitly telling it not to have a box-shadow */

-webkit-transition: border. 25s linear, color. 25s linear, background-color. 25s linear;

transition: border. 25s linear, color. 25s linear, background-color. 25s linear;

background-repeat: no-repeat;

}

.uploadfieldset

{

/*border: none; Explicitly telling it not to have a border */

border-radius: 0;

padding: 0;

}

.notes-field

{

background-clip: border-box;

background-size: contain

border-radius:0;

height: 54px;

width: 680px;

font-family: 'gotham_htfbook';

font-size: 18px;

color: #000000;

text-transform: none;

text-align: left;

font-weight: normal;

}

input[type=text], textarea

{

-webkit-appearance: none;

-webkit-transition: all 0.30s ease-in-out;

-moz-transition: all 0.30s ease-in-out;

-ms-transition: all 0.30s ease-in-out;

-o-transition: all 0.30s ease-in-out;

box-shadow: 0 0 5px rgba(89, 89, 89, 1);

padding: 3px 0px 3px 3px;

margin: 5px 1px 3px 0px;

border: 1px solid rgba(204, 204, 204, 1);

}

input[type=text]:focus, textarea:focus

{

box-shadow: 0 0 5px rgba(89, 89, 89, 1);

padding: 3px 0px 3px 3px;

margin: 5px 1px 3px 0px;

border: 1px solid rgba(204, 204, 204, 1);

}

但是，在這裡我已經訂購了一些行，以實現前面提到的一些原則。 因為我不知道你要用什麼，我試圖在不直接需要的時候對事物進行篡改。 我也沒有刪除你的任何一行。 相反，我只是簡單地註釋它們，以便你可以跟隨，看看我實際上做了什麼。 如果你願意，你可以自己刪除。input[type=text], textarea/* Moved to the top of your stylesheet */

{

-webkit-appearance: none;

-webkit-transition: all 0.30s ease-in-out;

-moz-transition: all 0.30s ease-in-out;

-ms-transition: all 0.30s ease-in-out;

-o-transition: all 0.30s ease-in-out;

box-shadow: 0 0 5px rgba(89, 89, 89, 1);/* Reminder: You're defining your box-shadow here */

padding: 3px 0px 3px 3px;

margin: 5px 1px 3px 0px;

border: 1px solid rgba(204, 204, 204, 1);/* Reminder: You're defining your border here */

}

input[type=text]:focus, textarea:focus/* Moved to the top of your stylesheet */

{

/*box-shadow: 0 0 5px rgba(89, 89, 89, 1); No need to redefine in :focus. It will be in inherited. */

padding: 3px 0px 3px 3px;/* See: padding in. uploadfieldset (below) */

/*margin: 5px 1px 3px 0px; No need to redefine in :focus. It will be in inherited. */

/*border: 1px solid rgba(204, 204, 204, 1); No need to redefine in :focus. It will be in inherited. */

}

.form-control

{

color: #34495e;

/*border-color: transparent; This will hide previously defined border. */

/*border: none!important; This will override previously defined border. Remember, don't use!important.*/

/*border-bottom-width: 0px; This will get rid of the bottom border. */

/*border-bottom: none; This will get rid of the bottom border. */

font-size: 16px;

line-height: 1.467;

padding: 8px 12px 8px 66px;

height: 54px;

-webkit-appearance: none;

/*-webkit-box-shadow: none; This will override previously defined box-shadows. */

/* box-shadow: none; This will override previously defined box-shadows. */

-webkit-transition: border. 25s linear, color. 25s linear, background-color. 25s linear;

transition: border. 25s linear, color. 25s linear, background-color. 25s linear;

background-repeat: no-repeat;

}

.uploadfieldset

{

/*border: none; This will override previously defined borders. */

border-radius: 0;

padding: 0;/* This tells your text field to not have any padding. However, when you click on your textarea, the padding set by textarea:focus will override THIS. */

}

.notes-field

{

background-clip: border-box;

background-size: contain

border-radius:0;

height: 54px;

width: 680px;

font-family: 'gotham_htfbook';

font-size: 18px;

color: #000000;

text-transform: none;

text-align: left;

font-weight: normal;

}

如果使用以下標記之一嘗試：

你可以看到，兩個欄位都具有同樣的樣式。 我希望這可以幫到你。