Ganti Textbox bootstrap twitter Glow and Shadows

88

Saya ingin menghapus cahaya Biru dari kotak teks dan perbatasan, tetapi saya tidak tahu cara menimpa salah satu js atau cssnya, periksa di Sini

EDIT 1

Saya ingin melakukan ini karena saya menggunakan plugin jquery Tag-it dan saya juga menggunakan twitter bootstrap, plugin menggunakan textField tersembunyi untuk menambahkan tag, tetapi ketika saya menggunakan bootstrap twitter, itu muncul sebagai kotak teks dengan cahaya di dalam a kotak teks yang agak aneh

— Fady Kamal
sumber

Apakah Anda memiliki kemampuan untuk menambahkan kelas baru? Jika demikian, tambahkan saja kelas baru denganborder:none; box-shadow:none;

— jeschafe

1

@jeschafe Di sini , dan masih belum ada

— Fady Kamal

1

Bolehkah saya bertanya mengapa Anda ingin melakukan ini? memiliki fokus pada klik karena berbagai alasan merupakan manfaat.

— Glyn Jackson

@GlynJson Mohon periksa Edit 1

— Fady Kamal

3

Tidak melihat alasan untuk tidak suka. Saya mengalami masalah yang sama. Namun dalam kasus saya, saya perlu membuat batas merah untuk menunjukkan kesalahan validasi. Namun karena cahaya itu tidak terlihat.

— Oybek

143

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

— jeschafe
sumber

27

Anda juga dapat mengganti pengaturan Bootstrap default untuk menggunakan warna Anda sendiri

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);
}

— Hawkee
sumber

3

perlu dicatat bahwa <select>pemilih tidak disertakan di sini.

— 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;
}

set ke gaya bootstrap tidak fokus

— Austin Greco
sumber

7

Setelah melakukan beberapa penggalian, saya pikir mereka mengubahnya di bootstrap terbaru. Kode di bawah ini berfungsi untuk saya, bukan kotak sederhana kontrol bentuknya yang saya gunakan yang menyebabkan masalah.

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;
}

— cromination
sumber

7

Pergi ke Customize Bootstrap , cari @ input-border-focus, masukkan kode warna yang Anda inginkan, gulir ke bawah dan klik "Compile and Download".

7

jika Anda merasa tidak dapat menangani kelas css maka cukup tambahkan gaya ke bidang teks

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

— Dimgba Kalu
sumber

5

ini akan menghapus batas dan fokus bayangan biru.

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/

— Glyn Jackson
sumber

4

Pada bootstrap 3 ada shodow atas kecil di ios, bisa dihapus dengan ini:

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

Dapatkan dari sini

— chris
sumber

1

Melihat komentar dari tautan yang Anda berikan, biasanya lebih baik menggunakan 'tidak ada' daripada 'tanda sisipan'.

— Ryan Walton

2

Awalan vendor tidak diperlukan pada saat ini, kecuali Anda mendukung browser lama, dan Anda dapat menyederhanakan penyeleksi Anda hanya dengan merujuk ke semua masukan, bukan masing-masing jenis individual.

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

— Melanie Seifert
sumber

0

HTML

<input type="text" class="form-control shadow-none">

CSS

input:focus{
    border: 1px solid #ccc
}

— Savan Padaliya
sumber

0

.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}

— Pradip
sumber