CSS / HTML: สร้างเส้นขอบที่เร่าร้อนรอบฟิลด์อินพุต

171

ฉันต้องการสร้างอินพุตที่เหมาะสมสำหรับแบบฟอร์มของฉันและฉันอยากรู้ว่า TWITTER ทำเส้นขอบที่เร่าร้อนรอบอินพุตของพวกเขาอย่างไร

ตัวอย่าง / รูปภาพของเส้นขอบ Twitter:

ป้อนคำอธิบายรูปภาพที่นี่

ฉันก็ไม่รู้เหมือนกันว่าจะสร้างมุมมนได้อย่างไร

html  css  input  border  glow 
— ฮันส์
แหล่งที่มา
7
นี่คือบทช่วยสอนที่สอนคุณ: CSS เอฟเฟกต์เรืองแสงพร้อมกล่องเงา
— เมือง
ลิงก์ของ @Town ดูเหมือนจะผิดปกติ: การวนรอบการเปลี่ยนเส้นทาง
— JeroldHaas

คำตอบ:

415

ไปเลย:

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

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

การสาธิตสด: http://jsfiddle.net/simevidas/CXUpm/1/show/

(เพื่อดูรหัสสำหรับการสาธิตให้ลบ "show /" ออกจาก 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>
ขยายตัวอย่างข้อมูล

— Šime Vidas
แหล่งที่มา
4
ฉันจะทำให้แสงเรืองแสงเคลื่อนไหวได้อย่างไร
— 3lvis
17
@NSElvis เช่นtransition: box-shadow linear 1s jsfiddle.net/simevidas/6LyWe/1
— Šime Vidas
ดีมาก. สิ่งหนึ่งที่ถ้าคุณต้องการให้สิ่งนี้นำไปใช้กับฟิลด์ป้อนข้อความคุณจะต้อง จำกัด ตัวเลือก: อินพุต [type = text]: โฟกัสอินพุต [type = รหัสผ่าน], อินพุต [type = textarea]
— Michael Kennedy
1
@MichaelKennedy ในแอปพลิเคชันในโลกแห่งความเป็นจริงนั่นคงไม่เพียงพอ .glowing-input { … }วิธีการมาตรฐานจะเรียนเช่น
— Šime Vidas
แน่นอนว่าประเด็นของฉันคือการนำไปใช้กับปุ่มตัวเลือกปุ่มส่งและอื่น ๆ ที่อาจไม่ต้องการ
— Michael Kennedy
30

แล้วอย่างนี้ ... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/

ป้อนคำอธิบายรูปภาพที่นี่

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
แหล่งที่มา
1
นี่ไม่ได้ทำให้สบายขึ้นและลง
— rubo77
1
แล้วไงล่ะ คำตอบที่ยอมรับไม่ได้ทำให้ง่ายต่อการออก คำถามเดิม (และคำตอบของฉัน) ถูกโพสต์ในปี 2011 และฉันค่อนข้างแน่ใจว่า Twitter ที่ส่องแสงของ Twitter ไม่ได้ทำให้เกิดความวุ่นวายทั้งในและนอก ยิ่งไปกว่านั้นคำถามไม่ได้มุ่งเน้นไปที่ความง่ายในการเข้าออก แต่จะเน้นไปที่วิธีทำให้ขอบมุมมีความโค้งมนซึ่งฉันได้ตอบไปแล้ว ฉันไม่คิดว่าคุณควรจะลงคะแนนให้ฉันเพียงเพราะไม่มีความง่ายในการเข้า
— Hristo
6

ใช้สีฟ้าปกติborder, ปานกลางborder-radiusและสีฟ้ากับตำแหน่งbox-shadow0 0

— SLaks
แหล่งที่มา
3

SLaks กระแทกกับหัว แต่คุณอาจต้องการดูการเปลี่ยนแปลงของอินพุตใน CSS3 โดยทั่วไป มุมโค้งมนและกล่องเงาเป็นคุณสมบัติใหม่ทั้งใน CSS3 และจะช่วยให้คุณทำสิ่งที่คุณกำลังมองหา หนึ่งของการเชื่อมโยงที่ชื่นชอบส่วนตัวของฉันสำหรับ CSS3 / HTML5 เป็นhttp://diveintohtml5.ep.io/

— DaOgre
แหล่งที่มา
2

ฉันรวมคำตอบก่อนหน้านี้สองคำ ( 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
แหล่งที่มา
2

รุ่นที่แก้ไขด้วยรุ่นที่เรืองแสงน้อยกว่าเล็กน้อย

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
แหล่งที่มา
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;
}
— ชาดิโอมาร์
แหล่งที่มา
0

ด้านล่างเป็นรหัสที่ Bootstrap ใช้ สีแตกต่างกันเล็กน้อย แต่แนวคิดเดียวกัน นี่คือถ้าคุณใช้ LESS เพื่อรวบรวม 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}");
  }
}

หากคุณไม่ได้ใช้ LESS นี่เป็นเวอร์ชั่นที่รวบรวมไว้:

.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
แหล่งที่มา
0

สิ่งนี้จะสร้างฟิลด์อินพุตและ textareas ที่เร่าร้อน:

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
แหล่งที่มา
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>
ขยายตัวอย่างข้อมูล

— Dhaval Patel
แหล่งที่มา
-3

คุณควรใช้Twitter Bootstrapซึ่งบรรจุสิ่งดีๆทั้งหมดไว้ข้างใน โดยเฉพาะอย่างยิ่งนี่คือสิ่งที่คุณต้องการ

นอกจากนี้คุณสามารถใช้ชุดรูปแบบต่าง ๆ ที่สร้างขึ้นสำหรับTwitter Bootstrapจากเว็บไซต์นี้

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