html - Cannot set textarea inner border shadow (still need help) -

edit: hoping see one. i'm stuck , have tried several things since posting it, no avail.

i'm trying display textarea border shadow. weird reason, while other regular text input boxes on page displaying inner shadows correctly, textareas not show inner shadows @ all. how force textarea display shadow other input boxes do?

here html i'm using.

<textarea class="form-control upladfieldset notes-field" rows="6"></textarea>

note when remove entire class attribute of

class="form-control upladfieldset notes-field"

the inner border shadow appears, of course other styling gone not ideal. tried commenting out individual lines of css in classes see line causing conflict, thing gets inner shadow appear if remove class attribute declaration altogether.

here css i'm using.

.form-control {     color: #34495e;     border-color: transparent;     border: none !important;     border-bottom-width: 0px;     border-bottom: none;     font-size: 16px;     line-height: 1.467;     padding: 8px 12px 8px 66px;     height: 54px;     -webkit-appearance: none;     -webkit-box-shadow: none;     box-shadow: none;     -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;     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: 0.30s ease-in-out;     -moz-transition: 0.30s ease-in-out;     -ms-transition: 0.30s ease-in-out;     -o-transition: 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); } 

well... have lot of things going on here, believe may have achieved desired result (i'm not 100% sure understand want, i'm operating under assumption want textarea include border , box-shadow identical input field). believe main problem here hierarchy fundamentals. because of that, feel there's few things should said before tackle our actual code here. in principle, should have more general rules towards top of stylesheet , more specific ones go down. resets (the raw elements textarea, input, etc.) should @ top--or @ least, above classes wish apply elements.

also, encourage avoid using !imporant. if find needing use !imporant, means real problem lies elsewhere. shows you're trying work against natural flow of css force cover else. , happens when need override rule? you're going have write more specific rule, , whole thing can turn mess.

so said, sake of familiarity, have taken code , commented out problematic lines , have included explanations why they're preventing achieving want.

.form-control {     color: #34495e;     /*border-color: transparent;       because of this, if had border, wouldn't able see (assuming didn't override later). */     /*border: none !important;         1. use of !important. 2. border isn't showing because explicitly telling not to. */     /*border-bottom-width: 0px;        you're getting rid of bottom border. */     /*border-bottom: none;             you're getting rid of 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 not have box-shadow */     /* box-shadow: none;               explicitly telling not have 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 not have 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: 0.30s ease-in-out;     -moz-transition: 0.30s ease-in-out;     -ms-transition: 0.30s ease-in-out;     -o-transition: 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); } 

however, here, have re-ordered of lines in order implement of principles mentioned earlier. because don't know you're going use for, tried not tamper things when not directly necessary. did not delete of lines. instead, commented them out can follow along , see did. can delete them if wish to.

input[type=text], textarea                       /* moved top of stylesheet */ {     -webkit-appearance: none;     -webkit-transition: 0.30s ease-in-out;     -moz-transition: 0.30s ease-in-out;     -ms-transition: 0.30s ease-in-out;     -o-transition: 0.30s ease-in-out;     box-shadow: 0 0 5px rgba(89, 89, 89, 1);     /* reminder: you're defining 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 border here */ }  input[type=text]:focus, textarea:focus           /* moved top of stylesheet */ {         /*box-shadow: 0 0 5px rgba(89, 89, 89, 1);      no need redefine in :focus. in inherited. */     padding: 3px 0px 3px 3px;                    /* see: padding in .uploadfieldset (below) */     /*margin: 5px 1px 3px 0px;                      no need redefine in :focus. in inherited. */     /*border: 1px solid rgba(204, 204, 204, 1);     no need redefine in :focus. in inherited. */ }   .form-control {     color: #34495e;     /*border-color: transparent;    hide defined border. */     /*border: none !important;      override defined border. remember, don't use !important.*/     /*border-bottom-width: 0px;     rid of bottom border. */     /*border-bottom: none;          rid of bottom border. */     font-size: 16px;     line-height: 1.467;     padding: 8px 12px 8px 66px;     height: 54px;     -webkit-appearance: none;     /*-webkit-box-shadow: none;     override defined box-shadows. */     /* box-shadow: none;            override 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;      override defined borders. */     border-radius: 0;     padding: 0;       /* tells text field not have padding. however, when click on textarea, padding set textarea:focus 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; } 

if try either of markup:

<textarea class="form-control upladfieldset notes-field" rows="6"></textarea> <input type="text"> 

you can see both fields stylized likewise. hope helps.