ฉันจะเพิ่ม glyphicon ลงในช่องป้อนข้อความได้อย่างไร ตัวอย่างเช่นฉันต้องการ 'ไอคอนผู้ใช้' ในการป้อนชื่อผู้ใช้สิ่งนี้:
ฉันจะเพิ่ม glyphicon ลงในช่องป้อนข้อความได้อย่างไร ตัวอย่างเช่นฉันต้องการ 'ไอคอนผู้ใช้' ในการป้อนชื่อผู้ใช้สิ่งนี้:
คำตอบ:
เราจะไปที่ Bootstrap ภายในไม่กี่วินาที แต่นี่คือแนวคิดพื้นฐาน CSS ในการเล่นเพื่อที่จะทำสิ่งนี้ด้วยตัวเอง เมื่อเคราของเหยื่อชี้คุณสามารถทำสิ่งนี้ได้ด้วย CSS โดยการวางตำแหน่งไอคอนภายในองค์ประกอบอินพุต จากนั้นเพิ่มการขยายไปที่ด้านใดด้านหนึ่งเพื่อให้ข้อความไม่ทับซ้อนกับไอคอน
ดังนั้นสำหรับ HTML ต่อไปนี้:
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-user"></i>
<input type="text" class="form-control" />
</div>
คุณสามารถใช้ CSS ต่อไปนี้เพื่อจัดตำแหน่งสัญลักษณ์ทางซ้ายและขวา:
/* enable absolute positioning */
.inner-addon {
position: relative;
}
/* style icon */
.inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
}
/* align icon */
.left-addon .glyphicon { left: 0px;}
.right-addon .glyphicon { right: 0px;}
/* add padding */
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
หมายเหตุ : สิ่งนี้ทึกทักว่าคุณกำลังใช้glyphiconsแต่ใช้ได้ดีกับตัวอักษรที่ยอดเยี่ยม
สำหรับ FA ให้แทนที่.glyphicon
ด้วย.fa
ในฐานะที่เป็นบัฟเฟอร์ชี้ให้เห็นนี้สามารถทำได้โดยกำเนิดภายใน Bootstrap โดยใช้การตรวจสอบสหรัฐอเมริกาที่มีไอคอนตัวเลือก นี้จะกระทำโดยการให้.form-group
องค์ประกอบของชั้นเรียนของและไอคอนระดับของ.has-feedback
.form-control-feedback
ตัวอย่างที่ง่ายที่สุดจะเป็นดังนี้:
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
ข้อดี :
ข้อเสีย :
เพื่อเอาชนะข้อเสียฉันได้รวบรวมคำร้องขอแบบดึงนี้พร้อมกับการเปลี่ยนแปลงเพื่อสนับสนุนไอคอนจัดชิดซ้าย เนื่องจากเป็นการเปลี่ยนแปลงที่ค่อนข้างใหญ่จึงถูกยกเลิกไปจนกว่าจะมีการเปิดตัวในอนาคต แต่หากคุณต้องการคุณสมบัติเหล่านี้ในวันนี้นี่คือคำแนะนำการใช้งานที่ง่าย:
เพียงแค่รวมการเปลี่ยนแปลงแบบฟอร์มเหล่านี้ใน css (เช่นการแทรกผ่านส่วนย่อยที่ซ่อนอยู่ที่ด้านล่าง)
* น้อยลง : อีกทางหนึ่งถ้าคุณเป็นสร้างน้อยกว่านี่คือรูปแบบการเปลี่ยนแปลงที่น้อยลง
จากนั้นสิ่งที่คุณต้องทำคือรวมคลาส.has-feedback-left
ในกลุ่มใด ๆ ที่มีคลาส.has-feedback
เพื่อให้จัดแนวไอคอนด้านซ้าย
เนื่องจากมีการกำหนดค่า html ที่เป็นไปได้จำนวนมากในรูปแบบที่แตกต่างกันขนาดการควบคุมที่แตกต่างกันชุดไอคอนที่แตกต่างกันและการมองเห็นฉลากที่แตกต่างกันฉันสร้างหน้าทดสอบที่แสดงชุด HTML ที่ถูกต้องสำหรับการเปลี่ยนแปลงแต่ละครั้ง
คำแนะนำการเพิ่มPS frizi
pointer-events: none;
ถูกเพิ่มใน bootstrap
ไม่พบสิ่งที่คุณกำลังมองหา ? ลองคำถามที่คล้ายกันเหล่านี้:
.focusedInput
ชั้นถูกกำหนดหลังจาก.input-group-addon
ดังนั้นเมื่อผ้าสไตล์Cascadeลงรูปแบบหลังควรจะมีความสำคัญ คุณช่วยอธิบายสถานการณ์ให้ดีขึ้นซึ่งนำไปสู่ปัญหานี้ได้หรือไม่?
<i class="icon-user"></i>
<i class="fa fa-user"></i>
เมื่อใดก็ตามที่คุณต้องการอัปเดตไลบรารีภายนอกโปรดอ่านบันทึกย่อประจำรุ่นและเอกสารใหม่เพื่อตรวจสอบว่าแอปของคุณยังใช้งานได้หรือไม่
อย่างเป็นทางการของวิธีการ ไม่จำเป็นต้องใช้ CSS ที่กำหนดเอง:
<form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4"></label>
<input type="text" class="form-control" id="inputSuccess4">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
</form>
DEMO: http://jsfiddle.net/LS2Ek/1/
ตัวอย่างนี้มีพื้นฐานจากตัวอย่างใน Bootstrap docs เลื่อนลงไปที่ "With Icons เสริม" ที่นี่http://getbootstrap.com/css/#forms-control-validation
{left:0}
คลาส glyphicon ควรดูแลการจัดตำแหน่งด้านซ้าย jsfiddle.net/LS2Ek/30 ฉันชอบวิธีเค้าร่าง + กล่องเงาของคุณ ดูเรียบร้อย!
left:0
ไม่ระบุจุดเริ่มต้นของอินพุตอีกต่อไป นอกจากนี้คุณจะต้องเพิ่มการขยายไปทางซ้ายของอินพุตและลบทางด้านขวา ยังคงเป็นทางออกที่ดีและสะอาด ฉันคิดว่าการระบุทางซ้ายของอินพุตนั้นเป็นส่วนที่ยากซึ่งเป็นที่ซึ่งเสื้อคลุมที่position:relative
มาพร้อมกับมือถือ
นี่เป็นทางเลือก CSS-only ฉันตั้งค่านี้สำหรับช่องค้นหาเพื่อให้ได้ผลคล้ายกับ Firefox (& อีกร้อยแอพอื่น ๆ )
HTML
<div class="col-md-4">
<input class="form-control" type="search" />
<span class="glyphicon glyphicon-search"></span>
</div>
CSS
.form-control {
padding-right: 30px;
}
.form-control + .glyphicon {
position: absolute;
right: 0;
padding: 8px 27px;
}
นี่คือวิธีที่ฉันทำโดยใช้เฉพาะ bootstrap CSS v3.3.1 ที่เป็นค่าเริ่มต้น:
<div class="form-group">
<label class="control-label">Start:</label>
<div class="input-group">
<input type="text" class="form-control" aria-describedby="start-date">
<span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
และนี่คือลักษณะที่ปรากฏ:
'การโกง' นี้จะทำงานกับผลข้างเคียงที่ระดับ glyphicon จะเปลี่ยนแบบอักษรสำหรับการควบคุมอินพุต
<input class="form-control glyphicon" type="search" placeholder=""/>
หากคุณต้องการกำจัดผลข้างเคียงคุณสามารถลบคลาส "glyphicon" และเพิ่ม CSS ต่อไปนี้ (อาจมีวิธีที่ดีกว่าในการกำหนดสไตล์องค์ประกอบตัวยึดตำแหน่งและฉันทดสอบบน Chrome เท่านั้น)
.form-control[type="search"]::-webkit-input-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
อาจเป็นวิธีที่สะอาดยิ่งขึ้น:
CSS
.form-control.glyphicon {
font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
HTML
<input class="form-control glyphicon" type="search" placeholder=" search" />
<input class="form-control glyphicon" type="text" placeholder=" username" />
<input class="form-control glyphicon" type="password" placeholder=" password" />
มันสามารถทำได้โดยใช้คลาสจาก bootstrap 3.x รุ่นอย่างเป็นทางการโดยไม่ต้อง CSS ใด ๆ ที่กำหนดเอง
ใช้input-group-addon
ก่อนแท็กอินพุตด้านในจากinput-group
นั้นใช้ glyphicons ใด ๆ นี่คือรหัส
<form>
<div class="form-group">
<div class="col-xs-5">
<div class="input-group">
<span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
<input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
</div>
</div>
</div>
</form>
นี่คือผลลัพธ์
ในการปรับแต่งเพิ่มเติมเพิ่ม css ที่กำหนดเองสองสามบรรทัดไปยังไฟล์ custom.css ของคุณเอง (ปรับการขยายหากจำเป็น)
.transparent {
background-color: transparent !important;
box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
}
.left-border-none {
border-left:none !important;
box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
}
ด้วยการทำให้พื้นหลังของinput-group-addon
โปร่งใสและทำให้การไล่ระดับสีด้านซ้ายของแท็กอินพุตเป็นศูนย์อินพุตจะมีลักษณะที่ไร้รอยต่อ นี่คือเอาต์พุตที่กำหนดเอง
นี่คือตัวอย่าง jsbin
วิธีนี้จะแก้ปัญหา CSS ที่กำหนดเองของการซ้อนทับกับป้ายกำกับการจัดตำแหน่งในขณะที่ใช้input-lg
และมุ่งเน้นไปที่ปัญหาแท็บ
ต่อไปนี้เป็นโซลูชันที่ไม่ใช่บูตสแตรปที่ทำให้มาร์กอัปของคุณง่ายขึ้นโดยการฝังการแทนรูปภาพของ glyphicon โดยตรงใน CSS โดยใช้การเข้ารหัส base64 URI
input {
border:solid 1px #ddd;
}
input.search {
padding-left:20px;
background-repeat: no-repeat;
background-position-y: 1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">
หากคุณใช้Fontawesomeคุณสามารถทำได้:
<input type="text" style="font-family:Arial, FontAwesome" placeholder="" />
ผลลัพธ์
รายการยูนิโค้ดที่สมบูรณ์สามารถพบได้ในการอ้างอิงไอคอนแบบอักษรสมบูรณ์แบบ 4.6.3
input {
border:solid 1px #ddd;
}
input.search {
padding-left:20px;
background-repeat: no-repeat;
background-position-y: 1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">
นี่เป็นอีกวิธีที่จะทำได้โดยการวาง glyphicon โดยใช้:before
องค์ประกอบหลอกใน CSS
สำหรับ HTML นี้:
<form class="form form-horizontal col-xs-12">
<div class="form-group">
<div class="col-xs-7">
<span class="usericon">
<input class="form-control" id="name" placeholder="Username" />
</span>
</div>
</div>
</form>
ใช้ CSS นี้ ( Bootstrap 3.x และเบราว์เซอร์ที่ใช้ Webkit )
.usericon input {
padding-left:25px;
}
.usericon:before {
height: 100%;
width: 25px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
position: absolute;
content: "\e008";
font-family: 'Glyphicons Halflings';
pointer-events: none;
}
ดังที่ @Frizi กล่าวเราต้องเพิ่ม pointer-events: none;
เพื่อให้เคอร์เซอร์ไม่รบกวนการทำงานของโฟกัสเข้า กฎ CSS อื่น ๆ ทั้งหมดใช้สำหรับการจัดกึ่งกลางและเพิ่มระยะห่างที่เหมาะสม
ผลลัพธ์:
ดังนั้นในการเพิ่มไอคอนผู้ใช้เพียงเพิ่ม
ไปที่placeholder
แอตทริบิวต์หรือที่ใดก็ตามที่คุณต้องการ
คุณอาจต้องการตรวจสอบชีตชีตนี้
ตัวอย่าง:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder=" placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value=" value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value=" submit-button" style="font-family: 'Glyphicons Halflings', Arial">
อย่าลืมตั้งค่าฟอนต์ของอินพุตเป็น Glyphicon หนึ่งโดยใช้รหัสต่อไปนี้:
font-family: 'Glyphicons Halflings', Arial
โดยที่ Arialเป็นฟอนต์ของข้อความปกติในอินพุต
ฉันยังมีหนึ่งการตัดสินใจสำหรับกรณีนี้ด้วย Bootstrap 3.3.5:
<div class="col-sm-5">
<label for="date">
<input type="date" placeholder="Date" id="date" class="form-control">
</label>
<i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>
ใช้ a form-control
และเพิ่มis-valid
ในคลาส สังเกตว่าตัวควบคุมเปลี่ยนเป็นสีเขียวได้อย่างไร แต่ที่สำคัญกว่านั้นสังเกตเห็นไอคอนเครื่องหมายถูกที่ด้านขวาของตัวควบคุม นี่คือสิ่งที่เราต้องการ!
ตัวอย่าง:
.my-icon {
padding-right: calc(1.5em + .75rem);
background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
background-repeat: no-repeat;
background-position: center right calc(.375em + .1875rem);
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-5">
<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
</div>
</div>
หากคุณโชคดีพอที่ต้องการเพียงเบราว์เซอร์รุ่นใหม่ลองใช้ css transform translate สิ่งนี้ไม่จำเป็นต้องใช้ตัวห่อหุ้มและสามารถปรับแต่งเพื่อให้คุณสามารถเว้นระยะห่างสำหรับอินพุต [type = number] เพื่อรองรับสปินเนอร์อินพุตหรือย้ายไปทางซ้ายของที่จับ
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
.is-invalid {
height: 30px;
box-sizing: border-box;
}
.is-invalid-x {
font-size:27px;
vertical-align:middle;
color: red;
top: initial;
transform: translateX(-100%);
}
<h1>Tasty Field Validation Icons using only css transform</h1>
<label>I am just a poor boy nobody loves me</label>
<input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>
คุณควรจะทำสิ่งนี้กับคลาส bootstrap ที่มีอยู่และสไตล์ที่กำหนดเองเล็กน้อย
<form>
<div class="input-prepend">
<span class="add-on">
<i class="icon-user"></i>
</span>
<input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
</div>
แก้ไข ไอคอนถูกอ้างอิงผ่านicon-user
คลาส คำตอบนี้ถูกเขียนขึ้นในเวลา Bootstrap เวอร์ชั่น 2 คุณสามารถดูการอ้างอิงในหน้าต่อไปนี้: http://getbootstrap.com/2.3.2/base-css.html#images