CSS / HTML: Giriş Alanı çevresinde parlayan bir kenarlık oluşturma

171

Formum için bazı iyi girdiler oluşturmak istiyorum ve TWITTER'ın parlayan kenarlıklarını girdilerinin etrafında nasıl yaptığını gerçekten bilmek istiyorum.

Twitter sınırı örneği / resmi:

resim açıklamasını buraya girin

Ayrıca yuvarlak köşeleri nasıl oluşturacağımı da bilmiyorum.

html  css  input  border  glow 
— Hans
kaynak
7
İşte size nasıl yapılacağını öğreten bir öğretici: Kutu gölgeli CSS parlama efektleri
— Kasaba
@Town'ın bağlantısı işlevsiz görünüyor: yönlendirme döngüsü.
— JeroldHaas

Yanıtlar:

415

Hadi bakalım:

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

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

Canlı demo: http://jsfiddle.net/simevidas/CXUpm/1/show/

(demo kodunu görüntülemek için URL'den "show /" kodunu kaldırın)

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>
Snippet'i genişlet

— Šime Vidas
kaynak
4
Işıma nasıl canlandırabilirim?
— 3lvis
17
@NSElvis eg transition: box-shadow linear 1s jsfiddle.net/simevidas/6LyWe/1
— Šime Vidas
Çok hoş. Bir şey, bunun yalnızca metin giriş alanlarına uygulanmasını istiyorsanız, seçiciyi kısıtlamak istersiniz: input [type = text]: focus, input [type = password], input [type = textarea].
— Michael Kennedy
1
@MichaelKennedy Gerçek dünya uygulamalarında bu yeterli olmaz. Standart yaklaşım sınıflar olabilir, örn .glowing-input { … }.
— Šime Vidas
Tabii, benim fikrim radyo düğmelerine, istenmeyebilecek düğmelere, vb.
— Michael Kennedy
30

Böyle bir şeye ne dersiniz ... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/

resim açıklamasını buraya girin

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
kaynak
1
Bu giriş ve çıkış hareket hızı değil
— rubo77
1
ne olmuş yani? kabul edilen cevap giriş kolaylığı sağlamaz. orijinal soru (ve benim cevabım) 2011 yılında gönderildi ve Twitter'ın parlayan sınırlarının da içeri girip çıkmadığından eminim. ayrıca, soru, cevap verdiğim yuvarlak köşelerle sınırın nasıl parlayacağına değil, çıkış kolaylığına odaklanmıyor. Beni rahatlatman gerektiğini düşünmüyorum, çünkü içeri girme kolaylığı yok
— Hristo
6

Normal mavi border, orta border-radiusve box-shadowkonumlu mavi kullanın 0 0.

— SLaks
kaynak
3

SLak'lar kafadaki çiviye çarptı, ancak genel olarak CSS3'teki girdilerdeki değişikliklere bakmak isteyebilirsiniz. Yuvarlatılmış köşeler ve kutu gölgesi CSS3'teki yeni özelliklerdir ve tam olarak aradığınızı yapmanıza izin verir. CSS3 / HTML5 için kişisel sık kullandığım bağlantılardan biri http://diveintohtml5.ep.io/ .

— DaOgre
kaynak
2

Önceki cevaplardan ikisini birleştirdim ( 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;  
}​
— user1218947
kaynak
2

Daha az parlayan sürümle değiştirilmiş sürüm.

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;  
}
— Şabat Hüseyin
kaynak
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
kaynak
0

Bootstrap'in kullandığı kod aşağıdadır. Renkler biraz farklı ama konsept aynı. CSS derlemek için LESS kullanıyorsanız:

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

LESS kullanmıyorsanız derlenmiş sürüm:

.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);
}
— Şital Şah
kaynak
0

Bu, parlak girdi alanları ve metin oluşturur:

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
kaynak
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>
Snippet'i genişlet

— Dhaval Patel
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.