คำถามติดแท็ก css

ฉันกำลังพัฒนาเว็บแอปพลิเคชันและฉันจำเป็นต้องระบุเบราว์เซอร์ของ Microsoft Edge แยกจากตัวอื่นเพื่อใช้สไตล์ที่เป็นเอกลักษณ์ มีวิธีระบุ Edge โดยใช้ CSS หรือไม่? เหมือนกับ, <!--[if IE 11]> Special instructions for IE 11 here <![endif]-->

92 css  browser  microsoft-edge 

มีตัวเลือก CSS ที่ใช้กับแอตทริบิวต์ที่ไม่ว่างเปล่าหรือไม่? ใช้การ:not([Data-Attribute=''])จับคู่หากแอตทริบิวต์ไม่มีอยู่ด้วย [Data-Attribute!='']ฉันกำลังมองหาสิ่งที่ต้องการ

92 css  css-selectors 

ฉันต้องการใช้ข้อความแบบไดนามิกเป็นพื้นหลังขององค์ประกอบบางอย่างในแท็กของฉัน ด้วยเหตุนี้ฉันจึงใช้รูปภาพ (ข้อความไดนามิก) ได้ ฉันจะทำอย่างไรกับ CSS หรือ JavaScript

92 html  css  background 

ด้วยมาร์กอัปต่อไปนี้ฉันต้องการให้ตัวเลือก CSS เลือกเมนูทั้งหมดยกเว้นเมนูแรกในแต่ละตัวเลือก div ซึ่งอาจมีได้มากมาย: <div class="options"> <div class="opt1"> <select title="Please choose Warranty"> <option value="">Select Waranty</option> <option value="1">1 year guarantee</option> <option value="2">3 year guarantee</option> </select> </div> <div class="opt2"> <select title="Please choose Color"> <option value="">Select Color</option> <option value="1">Red</option> <option value="2">Blue</option> </select> </div> <div class="opt3"> <select title="Please choose Size"> <option value="">Select Size</option> …

92 html  css  css-selectors 

พิจารณารหัสต่อไปนี้ : HTML: <div> <label for='name'>Name:</label> <input type='text' id='name' /> </div> CSS: div { height: 50px; border: 1px solid blue; } อะไรคือวิธีที่ง่ายที่สุดในการวางlabelและinputตรงกลางdiv(แนวตั้ง)?

92 css  html  vertical-alignment 

ฉันมีรูปภาพคงที่ซึ่งซ้อนทับหน้าเมื่อผู้ใช้กำลังเลื่อนหน้าจอสัมผัส (มือถือ) ฉันต้องการทำให้รูปภาพนั้น "ไม่สามารถคลิกได้" หรือ "ไม่ใช้งาน" หรืออะไรก็ตามเพื่อที่ว่าหากผู้ใช้แตะและลากจากรูปภาพนั้นหน้าที่อยู่ข้างหลังจะยังคงเลื่อนราวกับว่ารูปภาพนั้นไม่มีการ "บล็อก" การโต้ตอบ เป็นไปได้หรือไม่ หากจำเป็นฉันสามารถลองให้ภาพหน้าจอเป็นตัวอย่างสิ่งที่ฉันหมายถึง ขอบคุณ!

92 html  css  mobile  scroll  touch 

ฉันกำลังพยายามทำให้จุดไข่ปลาเคลื่อนไหวและสงสัยว่าเป็นไปได้ไหมกับภาพเคลื่อนไหว CSS ... ดังนั้นมันอาจจะเป็นเช่นนั้น Loading... Loading.. Loading. Loading... Loading.. และโดยพื้นฐานแล้วก็เป็นเช่นนั้นต่อไป ความคิดใด ๆ ? แก้ไข: ดังนี้http://playground.magicrising.de/demo/ellipsis.html

92 css  css-animations 

สมมติว่าฉันมีสีพื้นหลังที่มี "ริบบิ้น" วิ่งทับเป็นสีทึบอื่น ตอนนี้ฉันต้องการให้ริบบิ้นโปร่งใสบางส่วนเพื่อให้รายละเอียดบางส่วนกลมกลืนกัน แต่ยังคงให้ริบบิ้น "สีเดียวกัน" อยู่เหนือพื้นหลัง มีวิธี (ง่าย ๆ ) หรือไม่สำหรับความทึบ / อัลฟาที่กำหนดให้ <100% ของสีริบบิ้นค่า RGB ใดที่ควรจะต้องเหมือนกับสีของมันโดยมีความทึบ 100% บนพื้นหลัง นี่คือภาพ พื้นหลังเป็นริบบิ้นrgb(72, 28, 97) rgb(45, 34, 70)ฉันต้องการrgba(r, g, b, a)ริบบิ้นเพื่อให้ดูเหมือนกับสีทึบนี้

92 css  colors 

ผมมีคำถาม. ฉันมีองค์ประกอบดังนี้: <a> องค์ประกอบที่มี id = someGenerated บาง: เหมือนกัน: 0: name <a> องค์ประกอบที่มี id = someGenerated บาง: เหมือนกัน: 0: นามสกุล <a> องค์ประกอบที่มี id = someGenerated บาง: เดียวกัน: 1: ชื่อ <a> องค์ประกอบที่มี id = someGenerated บาง: เดียวกัน: 1: นามสกุล ฉันต้องการตัวเลือก CSS เพื่อรับชื่อ ปัญหาคือไม่รู้จะเอายังไง ฉันลองแล้วa[id*='Some:Same']- มันส่งคืน<a>องค์ประกอบทั้งหมด หลังจากที่ฉันสามารถรับองค์ประกอบที่ id ลงท้ายด้วยชื่อ แต่ฉันไม่ชอบความคิดนี้ ฉันคิดว่ามันสามารถทำได้ด้วยตัวเลือกอื่น ๆ

92 css  css-selectors  webdriver 

<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8"> <div v-for="job in job"> <div class="text-center"> <h1>{{ job.job_title }}</h1> <p><strong>Google Inc. </strong> - {{ job.location }}</p> <h2><u>Job Description</u></h2> </div> <p v-html="desc"></p> <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p> <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button> </div> </div> <div class="hidden-sm-down col-md-4"></div> </div> </div> คิดไม่ออกว่าจะวางปุ่มนี้ไว้ตรงกลางอย่างไร ใน …

92 css  twitter-bootstrap  bootstrap-4 

ฉันมีปัญหาแปลก ๆ กับปลั๊กอิน Jenkins HTML Publisher ซึ่ง CSS แฟนซีทั้งหมดที่ฉันเพิ่มลงในรายงานจะถูกตัดออกเมื่อดูใน Jenkins หากฉันดาวน์โหลดรายงานเป็นแบบโลคัลฉันจะเห็นการจัดรูปแบบ CSS มีการตั้งค่าใน Jenkins ที่อนุญาตให้ดู CSS หรือไม่? การตั้งค่าผู้เผยแพร่ HTML ของฉันใน Jenkins: หน้ารายงานของฉันเมื่อแสดงใน Jenkins: หน้ารายงานของฉันเมื่อแสดงใน Local:

92 html  css  jenkins  jenkins-plugins 

การใช้เมธอด css-in-js เพื่อเพิ่มคลาสให้กับคอมโพเนนต์การตอบสนองฉันจะเพิ่มคอมโพเนนต์หลายรายการได้อย่างไร นี่คือตัวแปรคลาส: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); นี่คือวิธีที่ฉันใช้: return ( <div className={ this.props.classes.container }> ข้างต้นใช้งานได้ แต่มีวิธีเพิ่มทั้งสองคลาสโดยไม่ใช้classNamesแพ็คเกจ npm หรือไม่? สิ่งที่ต้องการ: <div className={ this.props.classes.container + this.props.classes.spacious}>

92 css  reactjs  material-design  material-ui  jss 

ฉันมีองค์ประกอบที่มีสไตล์ position: relative; transition: all 2s ease 0s; จากนั้นฉันต้องการเปลี่ยนตำแหน่งได้อย่างราบรื่นหลังจากคลิกที่มัน แต่เมื่อฉันเพิ่มสไตล์การเปลี่ยนจะไม่เกิดขึ้นแทนองค์ประกอบจะเคลื่อนที่ทันที $$('.omre')[0].on('click',function(){ $$(this).style({top:'200px'}); }); อย่างไรก็ตามหากฉันเปลี่ยนcolorคุณสมบัติเช่นการเปลี่ยนแปลงอย่างราบรื่น $$('.omre')[0].on('click',function(){ $$(this).style({color:'red'}); }); อะไรคือสาเหตุของสิ่งนี้? มีคุณสมบัติที่ไม่ใช่ 'เฉพาะกาล' หรือไม่? แก้ไข : ฉันเดาว่าฉันควรจะพูดว่านี่ไม่ใช่ jQuery แต่เป็นห้องสมุดอื่น ดูเหมือนว่าโค้ดจะใช้งานได้ตามที่ต้องการมีการเพิ่มรูปแบบ แต่การเปลี่ยนใช้ได้เฉพาะในกรณีที่สองเท่านั้น?

92 javascript  css  transition 

ฉันต้องการแสดง<input type="range" />ตัวควบคุมแถบเลื่อนในแนวตั้ง ฉันกังวลเฉพาะเบราว์เซอร์ที่รองรับการควบคุมแถบเลื่อนช่วง ฉันพบความคิดเห็นและการอ้างอิงบางอย่างที่ดูเหมือนจะระบุว่าการตั้งค่าความสูงที่มากกว่าความกว้างจะทำให้เบราว์เซอร์เปลี่ยนการวางแนวโดยอัตโนมัติ แต่ในการทดสอบของฉันใช้งานได้เฉพาะใน Opera ที่ใช้ใน Opera เท่านั้น แต่ไม่ใช่อีกต่อไป ฉันจะปรับแนวแถบเลื่อนช่วง HTML5 ในแนวตั้งได้อย่างไร

92 html  css 

ดังนั้นจึงเป็นไปได้ที่จะมีภาพเคลื่อนไหวย้อนกลับบนเมาส์เช่น: .class{ transform: rotate(0deg); } .class:hover{ transform: rotate(360deg); } แต่เมื่อใช้แอนิเมชั่น @keyframes ฉันไม่สามารถใช้งานได้เช่น: .class{ animation-name: out; animation-duration:2s; } .class:hover{ animation-name: in; animation-duration:5s; animation-iteration-count:infinite; } @keyframe in{ to {transform: rotate(360deg);} } @keyframe out{ to {transform: rotate(0deg);} } ทางออกที่ดีที่สุดคืออะไรเมื่อรู้ว่าฉันต้องการการทำซ้ำและการเคลื่อนไหวเอง http://jsfiddle.net/khalednabil/eWzBm/

92 css  animation