แทนที่ twitter bootstrap Textbox Glow and Shadows


88

ฉันต้องการลบเรืองแสงสีน้ำเงินของกล่องข้อความและเส้นขอบ แต่ฉันไม่รู้ว่าจะแทนที่ js หรือ css ของมันอย่างไรให้เลือกที่นี่

แก้ไข 1

ฉันต้องการทำสิ่งนี้เพราะฉันใช้ปลั๊กอิน jquery Tag-itและฉันใช้ twitter bootstrap ด้วยปลั๊กอินจะใช้ textField ที่ซ่อนอยู่เพื่อเพิ่มแท็ก แต่เมื่อฉันใช้ twitter bootstrap มันจะปรากฏเป็นกล่องข้อความที่มีเรืองแสงภายใน a textbox ซึ่งแปลกไปหน่อย


คุณมีความสามารถในการเพิ่มชั้นเรียนใหม่หรือไม่? ถ้าเป็นเช่นนั้นเพียงเพิ่มคลาสใหม่ด้วยborder:none; box-shadow:none;
jeschafe

1
@jeschafe ที่นี่และยังไม่มีอะไร
Fady Kamal

1
ฉันขอถามได้ไหมว่าทำไมคุณถึงต้องการทำสิ่งนี้ เป็นประโยชน์ที่จะให้ความสำคัญกับการคลิกด้วยเหตุผลหลายประการ
Glyn Jackson

@GlynJackson กรุณาตรวจสอบแก้ไข 1
Fady Kamal

3
ไม่เห็นเหตุผลในการโหวตลด ฉันพบปัญหาเดียวกัน อย่างไรก็ตามในกรณีของฉันฉันจำเป็นต้องทำให้เส้นขอบเป็นสีแดงเพื่อระบุข้อผิดพลาดในการตรวจสอบความถูกต้อง อย่างไรก็ตามเนื่องจากแสงเรืองแสงจึงมองไม่เห็น
Oybek

คำตอบ:


143
.simplebox {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

27

คุณยังสามารถแทนที่การตั้งค่า Bootstrap เริ่มต้นเพื่อใช้สีของคุณเองได้

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

3
เป็นที่น่าสังเกตว่า<select>ตัวเลือกไม่รวมอยู่ที่นี่
Bryce York

11
input.simplebox:focus {
  border: solid 1px #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: none;
  -moz-transition: none;
  -webkit-transition: none;
}

ตั้งค่าเป็นสไตล์ที่ไม่โฟกัส bootstrap


8

หากคุณคิดว่าคุณไม่สามารถจัดการคลาส css ได้ให้เพิ่มสไตล์ลงในฟิลด์ข้อความ

<input type="text" style="outline:none; box-shadow:none;">

7

หลังจากทำการขุดแล้วฉันคิดว่าพวกเขาเปลี่ยนมันใน bootstrap ล่าสุด รหัสด้านล่างใช้ได้ผลสำหรับฉันมันไม่ง่ายเลยที่กล่องควบคุมรูปแบบที่ฉันใช้อยู่ซึ่งเป็นสาเหตุของปัญหา

input.form-control,input.form-control:focus {
    border:none;
    box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   -moz-transition: none;
   -webkit-transition: none;
}

7

ไปที่Customize Bootstrapมองหา @ input-border-focus ป้อนรหัสสีที่คุณต้องการเลื่อนลงแล้วคลิก "Compile and Download"


5

สิ่งนี้จะลบเส้นขอบและเงาสีน้ำเงินโฟกัส

input.simplebox,input.simplebox:focus {
  border:none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -moz-transition: none;
  -webkit-transition: none;
}

http://jsfiddle.net/pE5mQ/64/


4

ใน bootstrap 3 มี top shodow ขนาดเล็กบน iOS ซึ่งสามารถลบออกได้ด้วยสิ่งนี้:

input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
    -webkit-appearance: caret;
    -moz-appearance: caret; /* mobile firefox too! */
}

ได้รับจากที่นี่


1
ดูความคิดเห็นจากลิงค์ที่คุณให้มามักจะใช้ 'none' แทน 'caret' ดีกว่า
Ryan Walton

2

ในตอนนี้คุณไม่จำเป็นต้องใช้คำนำหน้าผู้ให้บริการเว้นแต่คุณจะรองรับเบราว์เซอร์เดิมและคุณสามารถลดความซับซ้อนของตัวเลือกของคุณได้โดยอ้างถึงอินพุตทั้งหมดแทนที่จะเป็นแต่ละประเภท

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  box-shadow: none;
}


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.