CSS / HTML: Buat perbatasan bercahaya di sekitar Bidang Input

171

Saya ingin membuat beberapa input yang layak untuk formulir saya, dan saya benar-benar ingin tahu bagaimana TWITTER melakukan perbatasan yang bersinar di sekitar input mereka.

Contoh / Gambar perbatasan Twitter:

masukkan deskripsi gambar di sini

Saya juga tidak tahu bagaimana cara membuat sudut membulat.

html  css  input  border  glow 
— Hans
sumber
7
Berikut tutorial yang mengajarkan Anda caranya: Efek cahaya CSS dengan bayangan kotak
— Town
Tautan @Town tampaknya tidak berfungsi: redirect loop.
— JeroldHaas

Jawaban:

415

Ini dia:

.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

Demo langsung: http://jsfiddle.net/simevidas/CXUpm/1/show/

(untuk melihat kode demo, hapus "show /" dari URL)

label { 
    display:block;
    margin:20px;
    width:420px;
    overflow:auto;
    font-family:sans-serif;
    font-size:20px;
    color:#444;
    text-shadow:0 0 2px #ddd;
    padding:20px 10px 10px 0;
}

input {
    float:right;
    width:200px;
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
    margin-top:-10px;    
}

input:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}
<label> Aktuelles Passwort: <input type="password"> </label>
<label> Neues Passwort: <input type="password"> </label>
Luaskan cuplikan

— Šime Vidas
sumber
4
Bagaimana saya bisa menghidupkan cahaya?
— 3lvis
17
@NSElvis misalnya transition: box-shadow linear 1s jsfiddle.net/simevidas/6LyWe/1
— Šime Vidas
Sangat bagus. Satu hal, jika Anda hanya ingin ini diterapkan pada bidang input teks, Anda ingin membatasi pemilih: input [type = text]: fokus, input [type = password], input [type = textarea].
— Michael Kennedy
1
@MichaelKennedy Dalam aplikasi dunia nyata, itu tidak akan cukup. Pendekatan standar akan menjadi kelas, misalnya .glowing-input { … }.
— Šime Vidas
Tentu, maksud saya adalah menerapkan tombol radio, mengirim tombol, dll. Yang mungkin tidak diinginkan.
— Michael Kennedy
30

Bagaimana dengan yang seperti ini ... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/

masukkan deskripsi gambar di sini

CSS

input {
    border: 1px solid #4195fc; /* some kind of blue border */

    /* other CSS styles */

    /* round the corners */
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px #4195fc;
       -moz-box-shadow: 0px 0px 4px #4195fc;
            box-shadow: 0px 0px 4px #4195fc; /* some variation of blue for the shadow */

}
— Hristo
sumber
1
Ini tidak memudahkan masuk dan keluar
— rubo77
1
terus? jawaban yang diterima tidak mudah. pertanyaan asli (dan jawaban saya) telah diposting pada tahun 2011, dan saya cukup yakin perbatasan bercahaya Twitter tidak berkurang masuk dan keluar juga. lebih jauh, pertanyaannya tidak fokus pada kemudahan masuk, melainkan pada bagaimana membuat perbatasan bersinar dengan sudut-sudut bulat, yang telah saya jawab. Saya tidak berpikir Anda harus menurunkan saya hanya karena tidak ada kemudahan
— Hristo
6

Gunakan warna biru normal border, sedang border-radius, dan biru box-shadowdengan posisi 0 0.

— Slaks
sumber
3

Slaks mengenai paku di kepala tetapi Anda mungkin ingin melihat perubahan untuk input di CSS3 secara umum. Sudut membulat dan bayangan kotak keduanya adalah fitur baru di CSS3 dan akan membuat Anda melakukan apa yang Anda cari. Salah satu tautan favorit pribadi saya untuk CSS3 / HTML5 adalah http://diveintohtml5.ep.io/ .

— DaOgre
sumber
2

Saya menggabungkan dua jawaban sebelumnya ( jsfiddle ).

input {
    /* round the corners */
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;    
}

input:focus { 
    outline:none;
    border: 1px solid #4195fc; 
    /* create a BIG glow */
    box-shadow: 0px 0px 14px #4195fc; 
    -moz-box-shadow: 0px 0px 14px #4195fc;
    -webkit-box-shadow: 0px 0px 14px #4195fc;  
}​
— pengguna1218947
sumber
2

Versi modifikasi dengan versi yang kurang bersinar.

input {
    /* round the corners */
    //background-color: transparent;
    border: 1px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;    
}

input:focus { 
    outline:none;
    border: 1px solid #4195fc; 
    /* create a BIG glow */
    box-shadow: 0px 0px 5px #4195fc; 
    -moz-box-shadow: 0px 0px 5px #4195fc;
    -webkit-box-shadow: 0px 0px 5px #4195fc;  
}
— Shabbir Hussain
sumber
0 
input[type="text"]{
   @include transition(all 0.30s ease-in-out);
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
input[type="text"]:focus{
  @include box-shadow(0 0 5px rgba(81, 203, 238, 1));
  -webkit-box-shadow: 0px 0px 5px #007eff;  
  -moz-box-shadow: 0px 0px 5px #007eff;  
  box-shadow: 0px 0px 5px #007eff;
}
— shadi omar
sumber
0

Di bawah ini adalah kode yang digunakan Bootstrap. Warna agak berbeda tetapi konsepnya sama. Ini jika Anda menggunakan KURANG untuk mengkompilasi CSS:

// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-focus-border` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.

.form-control-focus(@color: @input-border-focus) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  &:focus {
    border-color: @color;
    outline: 0;
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  }
}

Jika Anda tidak menggunakan KURANG maka inilah versi kompilasi:

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
— Shital Shah
sumber
0

Ini akan membuat bidang input dan textareas bersinar:

textarea,textarea:focus,input,input:focus{
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;
}

input:focus,textarea:focus { 
    outline: none;
    border: 1px solid #7bc1f7;
    box-shadow: 0px 0px 8px #7bc1f7;
    -moz-box-shadow: 0px 0px 8px #7bc1f7;
    -webkit-box-shadow: 0px 0px 8px #7bc1f7;
}
— rubo77
sumber
0 

$('.form-fild input,.form-fild textarea').focus(function() {
    $(this).parent().addClass('open');
});

$('.form-fild input,.form-fild textarea').blur(function() {
    $(this).parent().removeClass('open');
});
.open {
  color:red;   
}
.form-fild {
	position: relative;
	margin: 30px 0;
}
.form-fild label {
	position: absolute;
	top: 5px;
	left: 10px;
	padding:5px;
}

.form-fild.open label {
	top: -25px;
	left: 10px;
	/*background: #ffffff;*/
}
.form-fild input[type="text"] {
	padding-left: 80px;
}
.form-fild textarea {
	padding-left: 80px;
}
.form-fild.open textarea, 
.form-fild.open input[type="text"] {
	padding-left: 10px;
}
textarea,
input[type="text"] {
	padding: 10px;
	width: 100%;
}
textarea,
input,
.form-fild.open label,
.form-fild label {
	-webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
    	<form>
        <div class="form-fild">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Email :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Number :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Message :</label>
            <textarea cols="10" rows="5"></textarea>
        </div>
    </form>
    </div>
</div>
Luaskan cuplikan

— Dhaval Patel
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.