อินพุตสองตัวติดกันด้วย box-shadow

ฉันกำลังพยายามเพิ่มเงาของกล่องบนอินพุตสองตัวที่อยู่ติดกัน แต่เงาซ้อนทับกับอินพุต

ฉันพยายามเพิ่ม position: relative และ z-index ให้กับอินพุต แต่แล้วเงาก็ซ้อนทับอินพุตด้วยดัชนี z ต่ำสุด

มีวิธีป้องกันไม่ให้เงาซ้อนทับกับอินพุตอื่นที่อยู่ติดกันหรือไม่?

HTML:

<form method="post">
  <input name="email" type="text" >
  <input name="send" type="submit">
</form>

ซีเอสเอส:

.email {
  height:45px;
  width: 395px;
  float: left;
  box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
  -webkit-appearance: none;
}

.search {
  height: 45px;
  width: 60px;
  float: right;
  box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
  cursor: pointer;
  -webkit-appearance: none;
}

นี่คือตัวอย่างสิ่งที่ฉันหมายถึง: ป้อนคำอธิบายรูปภาพที่นี่

ขอบคุณ :) - เจสเปอร์


css shadow overlapping
person TheYaXxE    schedule 29.11.2013    source แหล่งที่มา
comment
ระบุโค้ด css และ html ของคุณ   -  person Indranil.Bharambe    schedule 29.11.2013
comment
HTML และ CSS ของคุณจะมีประโยชน์อย่างเหลือเชื่อ   -  person SW4    schedule 29.11.2013
comment
ห่อมันไว้ในภาชนะแล้วเติมเงาเข้าไปเหรอ?   -  person Pete    schedule 29.11.2013
comment
อัตรากำไรขั้นต้นเทียบเท่ากับการแพร่กระจายของเงา เช่น 40px ในกรณีของคุณ   -  person Abhitalks    schedule 29.11.2013
comment
ขอบคุณพีท นั่นได้ผล :D   -  person TheYaXxE    schedule 29.11.2013

คำตอบ (1)


arrow_upward
2
arrow_downward

คุณต้องล้อมอินพุตทั้งสองไว้ใน divs :

<form method="post">
    <div class="input--email">
         <input name="email" type="text" class="email">
    </div>
    <div class="input--search">
         <input name="send" type="submit" class="search">
    </div>
</form>

และให้เงาเดียวกันแก่พวกเขา:

.input--email, .input--search {
    float: left;
    box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
    height: 45px;
}
.input--email{
    width: 395px;
}
.input--search{
    margin-left: 15px;
    width: 60px;
}
.email, .search {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-appearance: none;
}
.search {
    cursor: pointer;
}

นี่คือซอ: http://jsfiddle.net/VLy6Q/

person clmntclmnt    schedule 29.11.2013