display संपत्ति का उपयोग करके, HTML तत्व एक स्टाइल परिप्रेक्ष्य से अदला-बदले हो जाते हैं। यह fieldset और legend के मामले में प्रतीत नहीं होता है।क्या कोई HTML तत्व फ़ील्ड/किंवदंती के रूप में स्टाइल किया जा सकता है?
क्या fieldset और legend जैसा दिखने के लिए अन्य HTML तत्वों को स्टाइल करना संभव है?
पिछले जवाब है, वह सही नहीं है अगर तुम क्यों इस कोशिश देखना चाहते हैं:
<body style="background-color: #f00">
<div style="border: 1px solid #000">
<h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
<fieldset><legend>Foobar</legend></fieldset>
</body>
AFAIK वहाँ कि सीमा-विघटन प्रभाव है कोई तरीका नहीं है कि legend तत्व fieldset की सीमा पर कारण बनता है। मुझे विश्वास नहीं है कि अकेले सीएसएस के साथ यह संभव है, यह केवल कुछ ऐसा है जो fieldset टैग का तरीका है।
स्पष्टीकरण: मैं एक ब्लॉक या इनलाइन तत्व इस तरह है कि यह अपने धारक ब्लॉक तत्व की स्पष्ट बॉर्डर फैला स्थिति किसी भी तरह की पता नहीं है, और उसके बाद का कारण बनता है कंटेनर तत्व की सीमा अपने बॉक्स के पीछे तोड़ा जा। यही <legend> है जिसमें <fieldset> तत्व युक्त सीमा पर है।
निश्चित रूप से, उदाहरण के लिए: सीमा के साथ एक डीआईवी तत्व और डीआईवी की सीमा को ओवरलैप करने के लिए पृष्ठभूमि रंग सेट के साथ एक बच्चे शीर्षक तत्व, एक फ़ील्ड और किंवदंती की तरह दिखता है।
बहुत बुनियादी उदाहरण:
<div style="border: 1px solid #000">
<h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
यह केवल तभी सही दिख सकता है जब पृष्ठभूमि एक सपाट रंग है, छवि नहीं। –
सच है। जब तक पृष्ठभूमि शीर्षक को बाल शीर्षक तत्व पर भी लागू करना संभव नहीं है और पृष्ठभूमि से मेल खाता है। हालांकि तत्वों को काम करने के लिए एक निश्चित स्थिति में होना आवश्यक होगा। –
यह बहुत अच्छा काम करता है, लेकिन पृष्ठभूमि 6 छवि होने पर थोड़ा अजीब काम करेगा, कुछ भी सशर्त टिप्पणी ठीक नहीं हो सका। IE6-8, FF3.6, सफारी 5, क्रोम 5
.fieldset {
position: relative;
border: 1px solid #000;
margin: 20px;
padding: 20px;
text-align: left;
}
.fieldset .legend {
background: #fff;
height: 1px;
position: absolute;
top: -1px;
padding: 0 20px;
color: #000;
overflow: visible;
}
.fieldset .legend span {
top: -0.5em;
position: relative;
vertical-align: middle;
display: inline-block;
overflow: visible;
}
<div class="fieldset">
<div class="legend">
<span>This is the title</span>
</div>
Test
</div>
में परीक्षण किया गया तो मैं तो यह कुछ हद तक लग रहा है कि कथा टैग की तरह (यह वास्तव में कथा टैग की तरह लग रहे) कोड तय की।
<div style="border: 2px groove #ccc">
<h1 style="font-weight:normal; background: #fff; margin-top: -11px; margin-left: 10px; padding: 0 10px 0 0; width: 40px; height:20px; font-size:1em;">Foobar</h1>
</div>
<fieldset><legend>Foobar</legend></fieldset>
मेरा उत्तर गलत नहीं है, इसे केवल कुछ शर्तों को काम करने की आवश्यकता है। आप पाएंगे कि यह आमतौर पर इस तरह की "चालबाजी" के मामले में होता है; शायद ही कभी एक आकार सभी समाधान फिट बैठता है। –
वैसे उसका सवाल था "मैं एक फ़ील्ड/किंवदंती जोड़ी के रूप में तत्व कैसे बना सकता हूं?" जब आप मेरे द्वारा प्रदान किए गए दस्तावेज़ को देखते हैं, तो क्या आप दो समान ब्लॉक देखते हैं? –
मैं वास्तव में जानना चाहता था कि क्या 'फ़ील्डसेट'/'किंवदंती' बनाता है या सटीक प्रभाव प्राप्त करने के लिए कोई तरीका है (सीएसएस मानक का उपयोग करना), या यदि प्रभाव केवल 'फ़ील्डसेट'/'किंवदंती के लिए हार्ड-कोड किया गया है '। चूंकि यह वास्तव में हार्ड कोडित प्रतीत होता है, इसलिए मैं इस जवाब को स्वीकार कर रहा हूं। – Jakob