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

ฉันกำลังทำงานเกี่ยวกับแอปพลิเคชันการขายภายในของ บริษัท ที่ฉันทำงานและฉันมีแบบฟอร์มที่อนุญาตให้ผู้ใช้เปลี่ยนที่อยู่ในการจัดส่งได้ ตอนนี้ฉันคิดว่ามันจะดูดีกว่านี้มากถ้าพื้นที่ข้อความที่ฉันใช้สำหรับรายละเอียดที่อยู่หลักจะใช้พื้นที่ของข้อความในนั้นและปรับขนาดโดยอัตโนมัติหากข้อความมีการเปลี่ยนแปลง นี่คือภาพหน้าจอของมันในขณะนี้ ความคิดใด ๆ ? @ Chris เป็นจุดที่ดี แต่มีเหตุผลที่ฉันต้องการปรับขนาด ฉันต้องการให้พื้นที่นั้นเป็นพื้นที่ของข้อมูลที่อยู่ในนั้น อย่างที่คุณเห็นในภาพหน้าจอถ้าฉันมีพื้นที่ข้อความคงที่จะต้องใช้พื้นที่แนวตั้งพอสมควร ฉันสามารถลดแบบอักษรได้ แต่ฉันต้องการที่อยู่ให้ใหญ่และอ่านได้ ตอนนี้ฉันสามารถลดขนาดของพื้นที่ข้อความได้แล้ว แต่ฉันมีปัญหากับคนที่มีบรรทัดที่อยู่ที่ใช้ 3 หรือ 4 (หนึ่งใช้เวลา 5) บรรทัด จำเป็นต้องให้ผู้ใช้ใช้แถบเลื่อนถือเป็นข้อห้ามที่สำคัญ ฉันเดาว่าฉันควรจะเจาะจงมากกว่านี้ ฉันหลังจากปรับขนาดตามแนวตั้งแล้วและความกว้างก็ไม่สำคัญเท่า ปัญหาเดียวที่เกิดขึ้นกับสิ่งนั้นคือหมายเลข ISO ("1" ขนาดใหญ่) ถูกดันเข้าไปใต้ที่อยู่เมื่อความกว้างของหน้าต่างเล็กเกินไป (ดังที่คุณเห็นในภาพหน้าจอ) ไม่เกี่ยวกับการมี gimick; เกี่ยวกับการมีช่องข้อความที่ผู้ใช้สามารถแก้ไขได้ซึ่งจะไม่ใช้เนื้อที่ที่ไม่จำเป็น แต่จะแสดงข้อความทั้งหมดในนั้น แม้ว่าจะมีคนคิดวิธีอื่นในการแก้ไขปัญหาฉันก็เปิดรับเช่นกัน ฉันได้แก้ไขโค้ดเล็กน้อยเพราะมันดูแปลกไปหน่อย ฉันเปลี่ยนเป็นเปิดใช้งานเมื่อคีย์อัพเพราะมันจะไม่คำนึงถึงอักขระที่เพิ่งพิมพ์ resizeIt = function() { var str = $('iso_address').value; var cols …

121 javascript  html  css  textarea  prototypejs 

มีวิธีการลงสีช่วงของคอลัมน์จนสุด ดูตัวอย่างเริ่มต้นด้านล่าง: <table border="1"> <tr> <th>Motor</th> <th colspan="3">Engine</th> <th>Car</th> <th colspan="2">Body</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>7</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </table> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด และฉันกำลังมองหาวิธีที่ดีกว่า (โค้ดน้อยกว่าสีที่ไม่ใช่สีแต่ละสี) ในการลงสีตัวอย่างเช่นช่วง "Engine" และ "Body" รวมถึงเซลล์ทั้งหมดที่อยู่ข้างใต้ใน #DDD <style> .color { background-color: #DDD } </style> <table border="1"> <tr> …

121 html  css 

เป็นไปได้หรือไม่ที่จะปิดใช้งานล้อเลื่อนที่เปลี่ยนหมายเลขในช่องหมายเลขอินพุต ฉันยุ่งกับ CSS เฉพาะ webkit เพื่อลบสปินเนอร์ แต่ฉันต้องการกำจัดพฤติกรรมนี้โดยสิ้นเชิง ฉันชอบใช้type=numberเพราะมันแสดงคีย์บอร์ดที่ดีบน iOS

121 javascript  css  html  forms 

ด้วย HTML บางอย่างเช่นนี้: <p>Some Text</p> จากนั้น CSS บางส่วนเช่นนี้: p { color:black; } p:hover { color:red; } ฉันจะอนุญาตให้อุปกรณ์ที่เปิดใช้งานระบบสัมผัสเป็นเวลานานเพื่อจำลองโฮเวอร์ซ้ำได้อย่างไร ฉันสามารถเปลี่ยนมาร์กอัป / ใช้ JS ฯลฯ ได้ แต่คิดวิธีง่ายๆในการทำเช่นนี้ไม่ได้

120 javascript  html  css  hover  touch 

ฉันกำลังพยายามออกแบบ HTML / CSS ที่สามารถวางเส้นขอบรอบ ๆ แถวที่ต้องการในตารางได้ ใช่ฉันรู้ว่าฉันไม่ควรใช้ตารางในการจัดวาง แต่ฉันไม่รู้ CSS เพียงพอที่จะแทนที่มันได้ทั้งหมด อย่างไรก็ตามฉันมีตารางที่มีหลายแถวและคอลัมน์บางส่วนรวมเข้ากับ rowspan และ colspan และฉันต้องการใส่เส้นขอบที่เรียบง่ายรอบ ๆ ส่วนต่างๆของตาราง ตอนนี้ฉันใช้คลาส CSS แยกกัน 4 คลาส (บนล่างซ้ายขวา) ที่ฉันแนบกับ<td>เซลล์ที่อยู่ด้านบนล่างซ้ายและขวาของตารางตามลำดับ .top { border-top: thin solid; border-color: black; } .bottom { border-bottom: thin solid; border-color: black; } .left { border-left: thin solid; border-color: black; } .right …

120 html  css  border  css-tables 

ฉันกำลังพยายามจำลองตัวบ่งชี้กิจกรรมสไตล์ Apple (ไอคอนโหลดนาฬิกาแดด) โดยใช้ภาพเคลื่อนไหว PNG และ CSS3 ฉันหมุนภาพและทำไปเรื่อย ๆ แต่ดูเหมือนว่าจะมีความล่าช้าหลังจากที่ภาพเคลื่อนไหวเสร็จสิ้นก่อนที่จะหมุนภาพถัดไป @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } #loading img { -webkit-animation-name: rotate; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-transition-timing-function: linear; } ฉันได้ลองเปลี่ยนระยะเวลาของแอนิเมชั่นแล้ว แต่มันก็ไม่แตกต่างกันถ้าคุณทำให้ช้าลงให้พูดว่า 5s มันชัดเจนมากขึ้นว่าหลังจากการหมุนครั้งแรกจะมีการหยุดชั่วคราวก่อนที่มันจะหมุนอีกครั้ง นี่คือการหยุดชั่วคราวที่ฉันต้องการกำจัด ความช่วยเหลือใด ๆ ที่ชื่นชมมากขอบคุณ

120 animation  webkit  css  transform 

ฉันกำลังพยายามแสดงรายละเอียดของการรับในตาราง ฉันต้องการให้ตารางนั้นมีความสูงต่ำสุดเพื่อแสดงสินค้า ดังนั้นหากมีผลิตภัณฑ์เพียงชิ้นเดียวตารางจะต้องมีช่องว่างด้านท้ายเป็นอย่างน้อย ในทางกลับกันหากมีสินค้า 5 ชิ้นขึ้นไปก็จะไม่เป็นพื้นที่ว่าง ฉันได้ลองกับ css นี้: table,td,tr{ min-height:300px; } แต่มันไม่ทำงาน ขอบคุณล่วงหน้า.

120 html  css 

ฉันกำลังทำงานกับ CSS ที่เป็นรูปธรรมและดูเหมือนว่าฉันจะติดขัดกับช่องที่เลือก ฉันใช้ตัวอย่างที่ให้มาจากไซต์ของพวกเขา แต่น่าเสียดายที่มันแสดงผลในมุมมองใด ๆ ฉันสงสัยว่าอาจมีคนอื่นช่วยได้ สิ่งที่ฉันกำลังพยายามทำคือสร้างแถวที่มีตัวเว้นวรรคท้าย 2 ตัวที่มีช่องว่างภายใน - จากนั้นภายในรายการสองแถวด้านในควรมีการป้อนข้อความค้นหาและรายการแบบเลื่อนลงเพื่อเลือกการค้นหา นี่คือตัวอย่างที่ฉันกำลังดำเนินการจาก: http://materializecss.com/forms.html ขอบคุณล่วงหน้า. นี่คือตัวอย่างโค้ดที่เป็นปัญหา <div class="row"> <form class="col s12"> <div class="row"> <div class="input-field col s2"></div> <div class="input-field col s5"> <input id="icon_prefix" type="text" class="validate" /> <label for="icon_prefix">Search</label> </div> <div class="input-field col s3"> <label>Materialize Select</label> <select> <option value="" disabled="disabled" selected="selected">Choose …

120 javascript  html  css  materialize 

ฉันต้องการใช้เงื่อนไขใน CSS ของฉัน ความคิดคือฉันมีตัวแปรที่ฉันแทนที่เมื่อไซต์ถูกเรียกใช้เพื่อสร้างสไตล์ชีตที่ถูกต้อง ฉันต้องการให้ตามตัวแปรนี้สไตล์ชีตเปลี่ยนไป! ดูเหมือนว่า: [if {var} eq 2 ] background-position : 150px 8px; [else] background-position : 4px 8px; สามารถทำได้หรือไม่? คุณจะทำอย่างไร?

120 css  stylesheet  conditional-statements 

ฉันพบ Unicode อักขระพิเศษจากการค้นหาของ FileFormat.Info อักขระบางตัวแสดงเป็นร่ายมนตร์ขาวดำแบบคลาสสิกเช่น⚠ (ป้ายเตือน\u26A0หรือ⚠) สิ่งเหล่านี้ดีกว่าเนื่องจากฉันสามารถใช้สไตล์ CSS (เช่นสี) กับพวกเขาได้ คนอื่น ๆ กำลังแสดงผลเป็นอีโมจิการ์ตูนที่ใหม่กว่าเช่น⌛ (นาฬิกาทราย\u231Bหรือ⌛) สิ่งเหล่านี้ไม่เป็นที่ต้องการเนื่องจากฉันไม่สามารถจัดสไตล์ได้อย่างสมบูรณ์ ดูเหมือนว่าเบราว์เซอร์จะทำการเปลี่ยนแปลงนี้เนื่องจากฉันสามารถเห็นสัญลักษณ์นาฬิกาทรายบน Mac Firefox ไม่ใช่แค่ Mac Chrome หรือ Mac Safari มีวิธีบังคับให้เบราว์เซอร์แสดงเวอร์ชัน (เสียงเดียวแบบแบน) ที่เก่ากว่าหรือไม่? ปรับปรุง : ดูเหมือน (จากความคิดเห็นด้านล่าง) มีการเลือกนำเสนอข้อความ , FE0Eที่มีอยู่ในการบังคับใช้ข้อความ VS-อีโมจิ ตัวเลือกจะเชื่อมต่อกันเป็นส่วนต่อท้ายโดยไม่มีช่องว่างบนโค้ดของอักขระเช่น⌛︎HTML hex หรือ\u231B\uFE0Eสำหรับ JS อย่างไรก็ตามเบราว์เซอร์ทั้งหมดไม่ได้รับเกียรติจากเบราว์เซอร์ทั้งหมด (เช่น Chrome และ Edge)

120 javascript  html  css  unicode  emoji 

ฉันพบกระทู้นี้ - คุณจะยืดรูปภาพเพื่อเติม <div> ได้อย่างไรในขณะที่รักษาอัตราส่วนของรูปภาพ - นั่นไม่ใช่สิ่งที่ฉันต้องการทั้งหมด ฉันมี div ขนาดหนึ่งและมีรูปภาพอยู่ข้างใน ฉันต้องการที่จะเสมอเติมออก div กับภาพโดยไม่คำนึงว่าภาพที่เป็นแนวนอนหรือแนว และไม่สำคัญว่าภาพจะถูกตัดออก (ตัว div นั้นซ่อนอยู่มากเกินไป) ดังนั้นหากรูปภาพเป็นแนวตั้งฉันต้องการwidthให้เป็นแบบนั้น100%และheight:autoเพื่อให้มันคงสัดส่วน หากรูปภาพเป็นแนวนอนฉันต้องการheightให้เป็น100%และwidth to beอัตโนมัติ " ฟังดูซับซ้อนใช่มั้ย? <div class="container"> <img src="some-image.jpg" alt="Could be portrait or landscape"/> </div> เนื่องจากฉันไม่รู้ว่าจะทำอย่างไรฉันจึงสร้างภาพสั้น ๆ ว่าฉันหมายถึงอะไร ฉันอธิบายไม่ถูกด้วยซ้ำ ดังนั้นฉันเดาว่าฉันไม่ใช่คนแรกที่ถามเรื่องนี้ อย่างไรก็ตามฉันไม่สามารถหาวิธีแก้ปัญหานี้ได้ อาจจะมีวิธีใหม่ของ CSS3 ในการทำสิ่งนี้ - ฉันกำลังคิดถึง flex-box ความคิดใด ๆ ? บางทีมันอาจจะง่ายกว่าที่ฉันคาดไว้?

120 image  css  positioning  flexbox 

ฉันมีปัญหากับรหัสของฉัน เนื่องจากฉันต้องการรวมแบบอักษรสากลสำหรับเพจของฉันและฉันดาวน์โหลดไฟล์. ttf และฉันรวมไว้ใน CSS หลักของฉัน แต่แบบอักษรของฉันจะไม่เปลี่ยน นี่คือรหัสง่ายๆของฉัน: @font-face { font-family: 'oswald'; src: url('/font/oswald.regular.ttf'); } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, …

120 html  css 

ฉันจะมีภาพเคลื่อนไหว CSS สองภาพที่เล่นด้วยความเร็วที่ต่างกันได้อย่างไร ภาพควรหมุนและเติบโตไปพร้อม ๆ กัน การหมุนจะวนทุกๆ 2 วินาที การเจริญเติบโตจะหมุนเวียนทุกๆ 4 วินาที ตัวอย่างรหัส: .image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation:spin 2s linear infinite; -webkit-animation:scale 4s linear infinite; } @-webkit-keyframes spin { 100% { transform: rotate(180deg); } } @-webkit-keyframes scale { …

120 css  css-animations 

ถ้าเป็นเช่นนั้นมันจะทำให้visibilityคุณสมบัตินั้นเสื่อมประสิทธิภาพหรือไม่? (ฉันตระหนักดีว่า Internet Explorer ยังไม่รองรับคุณสมบัติ CSS2 นี้) การเปรียบเทียบเครื่องมือโครงร่าง ดูเพิ่มเติม: อะไรคือความแตกต่างระหว่างการมองเห็น: ซ่อนและแสดง: ไม่มี

119 html  css 

ฉันต้องการสร้างภาพหมุนซึ่งผู้ใช้สามารถสลับไปมาระหว่างภาพต่างๆได้โดยคลิกที่ลูกศร ตัวอย่างเช่น: อย่างไรก็ตามฉันใช้ได้เฉพาะ HTML และ CSS เท่านั้นไม่มี JavaScript (ดังนั้น jQuery) ฉันต้องการการตั้งค่าพื้นฐาน การเปลี่ยนที่ราบรื่นและสิ่งที่คล้ายกันนั้นไม่จำเป็น ฉันจะทำสิ่งนี้ให้สำเร็จได้อย่างไร

119 javascript  jquery  html  css