एक घंटा तत्व का रंग बदलना

Question

मैं hrCSS का उपयोग करके अपने टैग का रंग बदलना चाहता हूं । मेरे द्वारा नीचे दिया गया कोड काम नहीं करता है:

hr {
    color: #123455;
}

Comments

सिर्फ FYI करें, मैंने वही करने की कोशिश की जो आपने एक अलग रंग के साथ की थी और यह फ़ायरफ़ॉक्स 5 बीटा में काम करता है, लेकिन IE 9 में नहीं, jsfiddle.net/TGtSd

@ कीकी ज़ी मेरे लिए काम नहीं कर रही (क्रोम)।

— मार्टी

क्रोम में @Marty बैकग्राउंड-रंग काम करता है, लेकिन आप सही रंग नहीं ... अजीब ...

क्रोम काम नहीं कर रहा है पृष्ठभूमि-रंग भी मेरे लिए काम नहीं कर रहा है

— koool

ठीक है, अगर कोई भी परीक्षण करना चाहता है, तो यहां एक

Answer 1

मुझे लगता है कि आपको border-colorइसके बजाय उपयोग करना चाहिए color, यदि आपका इरादा <hr>टैग द्वारा उत्पादित लाइन का रंग बदलना है ।

यद्यपि, यह टिप्पणियों में बताया गया है कि, यदि आप अपनी रेखा का आकार बदलते हैं, तो सीमाएं अभी भी वैसी ही विस्तृत होंगी जैसा कि आप शैलियों में निर्दिष्ट करते हैं, और पंक्ति डिफ़ॉल्ट रंग से भरी होगी (जो कि वांछित प्रभाव नहीं है, अधिकांश समय)। तो ऐसा लगता है कि इस मामले में आपको भी निर्दिष्ट करने की आवश्यकता होगी background-color(जैसा कि @Ibu ने उनके उत्तर में सुझाव दिया है)।

अपनी डिफ़ॉल्ट स्टाइलशीट में HTML 5 बॉयलरप्लेट परियोजना निम्नलिखित नियम को निर्दिष्ट करती है:

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

SitePoint द्वारा हाल ही में प्रकाशित "12 लिटिल-ज्ञात सीएसएस तथ्य" नामक एक लेख में उल्लेख किया गया है कि <hr>यह border-colorअपने माता-पिता के लिए colorनिर्दिष्ट कर सकता है hr { border-color: inherit }।

Comments

बॉर्डर-कलर के साथ समस्या यह है कि यदि आप hr को बड़ा बनाते हैं, तो यह सिर्फ बॉर्डर को कलर करता है, jsfiddle.net/TGtSd/9 ...

@ एटन ऐसा नहीं है जो मैं उस समय के आकार के बारे में बता रहा था ... यदि आप ऊंचाई बढ़ाते हैं, और आप केवल सीमा-रंग का उपयोग करते हैं, तो आपको एक रंगीन सीमा के साथ एक आयत मिलेगा, लेकिन अंदर नहीं होगा रंगीन ...

आखिर सीमा पर परेशान क्यों? क्यों न इसे केवल पृष्ठभूमि-रंग दिया जाए और इसके साथ किया जाए? संपादित करें: nvm, मैंने ब्राउज़र संगतता पर उत्तर नहीं देखा।

— वकील

Answer 2

• border-colorक्रोम और सफारी में काम करता है ।
• background-color फ़ायरफ़ॉक्स और ओपेरा में काम करता है।
• colorIE7 + में काम करता है ।

Comments

यदि हम चाहते हैं कि हमारी साइट सभी ब्राउज़रों पर देखी जाए, तो क्या हमें उन सभी का उपयोग करना चाहिए?

— एमईएम

border-color क्रोम पर काम नहीं करता है । इसे सफेद पृष्ठभूमि पर सफेद करने की कोशिश करें। ये दोनों काम करेंगे: या तो 1) color:white; border-style:solid; या 2) border-color:white; border-style:solid; ।

— पचेरियर

@Pacerier हाँ यह करता है। एक शैली और / या चौड़ाई निर्दिष्ट करने की आवश्यकता हो सकती है

— GôTô

जानकारी फिर से। IE (कम से कम) गलत है। IE में 'बॉर्डर-कलर' ठीक काम करता है; 'रंग' नहीं (IE11)

— taiji123

Answer 3

मुझे लगता है कि यह उपयोगी हो सकता है। यह सरल सीएसएस चयनकर्ता था।

hr { background-color: red; height: 1px; border: 0; }

Comments

यह निश्चित रूप से मेरे लिए क्रोम डेस्कटॉप में काम करता था: <शैली> घंटा {पृष्ठभूमि-रंग: लाल; ऊंचाई: 1 पीएक्स; सीमा: 0; } </ शैली> <hr>

— माइकल d

मेरे लिए क्रोम और फ़ायरफ़ॉक्स दोनों में काम करता है

— रॉबर्ट सी

Answer 4

hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

इस तरह से करने से आप ऊंचाई को बदल सकते हैं यदि आवश्यक हो। सौभाग्य। स्रोत: सीएसएस के साथ एचआर स्टाइल कैसे करें

Answer 5

फ़ायरफ़ॉक्स, ओपेरा, इंटरनेट एक्सप्लोरर, क्रोम और सफारी में परीक्षण किया गया।

hr {
    border-top: 1px solid red;
}

फिडल देखें ।

Answer 6

रंग के साथ केवल बॉर्डर-टॉप अलग रंग में रेखा बनाने के लिए पर्याप्त है।

hr {
    border-top: 1px solid #ccc;
}

Answer 7

hr {
  height:0; 
  border:0; 
  border-top:1px solid #083972; 
}

इससे क्षैतिज रंग 1px मोटा होगा, जबकि इसका रंग भी बदल जाएगा

Comments

सबसे अच्छा जवाब यहाँ। ऊंचाई को 0px पर सेट करना और बॉर्डर डो को जोड़ने से घंटा 2 px चौड़ा नहीं हो जाता। शानदार कॉल !!

— बॉब रॉबर्ट्स

Answer 8

मेरा मानना ​​है कि यह सबसे प्रभावी तरीका है:

<hr style="border-top: 1px solid #ccc; background: transparent;">

या यदि आप इसे सभी hr एलिमेंट्स पर करना पसंद करते हैं, तो आप इसे CSS पर लिखते हैं:

hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}

Answer 9

घंटा
{
रंग: # f00;
पृष्ठभूमि-रंग: # f00;
ऊंचाई: 5 पीएक्स;
}

Answer 10

hr
{
  background-color: #123455;
}

पृष्ठभूमि वह है जिसे आपको बदलने की कोशिश करनी चाहिए

आप सीमाओं के रंग के साथ भी काम कर सकते हैं। मुझे यकीन नहीं है कि मुझे लगता है कि इसके साथ क्रॉसब्रोसर मुद्दे हैं। आपको इसे अलग-अलग ब्राउज़रों में परीक्षण करना चाहिए

Comments

मैंने इसे फ़ायरफ़ॉक्स 5 बीटा, IE 9, क्रोम, ओपेरा और सफारी में

@ कूल, कौन सा हिस्सा काम नहीं करता है? पीछे का रंग? या सीमा-रंग? मैंने सिर्फ सीमा-रंग का परीक्षण किया: नीला; और इसने क्रोम में काम किया

— Ibu

[बॉर्डर-कलर] क्रोम में काम करता है। [पृष्ठभूमि-रंग] नहीं करता है। अगर मैं पर्याप्त प्रतिनिधि होता तो मैं वोट कर देता।

— समतुल्यता

Answer 11

यदि आप css वर्ग का उपयोग करते हैं तो इसे सभी 'hr' टैग द्वारा लिया जाएगा, लेकिन यदि आप किसी विशेष 'hr' के लिए नीचे दिए गए कोड का उपयोग करना चाहते हैं, तो इनलाइन css

<hr style="color:#99CC99" />

यदि यह कोड के नीचे क्रोम प्रयास में काम नहीं कर रहा है:

<hr color="red" />

Answer 12

यहां सभी उत्तरों को पढ़ने के बाद, और वर्णित जटिलता को देखते हुए, मैंने एचआर के साथ प्रयोग करने के लिए एक छोटे से मोड़ पर सेट किया। और, निष्कर्ष यह है कि आप अपने द्वारा लिखे गए अधिकांश मंकीपेड सीएसएस को फेंक सकते हैं, इस छोटे प्राइमर को पढ़ सकते हैं और शुद्ध सीएसएस की इन दो पंक्तियों का उपयोग कर सकते हैं:

hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

यही कारण है सभी शैली के लिए अपने बजे की जरूरत है।

• क्रॉस-ब्राउज़र, क्रॉस-डिवाइस, क्रॉस-ओएस, क्रॉस-इंग्लिश-चैनल, क्रॉस-एज में काम करता है।
• नहीं "मुझे लगता है कि यह काम करेगा ..." , "आपको सफारी / आईई को ध्यान में रखने की आवश्यकता है ..." , आदि।
• बिना किसी अतिरिक्त सीएसएस - कोई height, width, background-color, color, आदि शामिल किया गया।

बस बुलेटप्रूफ रंगीन एच.आर. यह इतना आसान ^{टीएम है} ।

---

बोनस: एचआर को कुछ ऊंचाई देने के लिए H, बस के border-widthरूप में सेट करें H/2।

Comments

मैंने प्रत्येक तरीके से एक शर्त लगाई: `` एचआर {बॉर्डर-टॉप: 1 पीएक्स सॉलिड पर्पल; सीमा-रंग: बैंगनी; पृष्ठभूमि-रंग: बैंगनी; बैंगनी रंग; } ~~~

— डेविड जोन्स

फ़ायरफ़ॉक्स में काम नहीं background-colorकरता है , करता है।

— कैरम

Answer 13

कुछ ब्राउज़र colorविशेषता का उपयोग करते हैं और कुछ विशेषता का उपयोग करते background-colorहैं। सुरक्षित रहने के लिए:

hr{
    color: #color;
    background-color: #color;
}

Answer 14

मैं IE, फ़ायरफ़ॉक्स और क्रोम मई 2015 पर परीक्षण कर रहा हूं और यह वर्तमान संस्करणों के साथ सबसे अच्छा काम करता है। यह HR को केंद्र बनाता है और इसे 70% चौड़ा बनाता है:

hr.light { 
    width:70%; 
    margin:0 auto; 
    border:0px none white; 
    border-top:1px solid lightgrey; 
}

<hr class="light" />

Comments

यह मैं क्या देख रहा था। मेरी गलती थी कि मैं css परिभाषा में hr और class के बीच एक स्थान जोड़ रहा था (hr .light {})

— rochasdv

Answer 15

आपको सीमा-चौड़ाई 0 पर सेट करनी चाहिए; यह फ़ायरफ़ॉक्स और क्रोम में अच्छा काम करता है।

hr {
  clear: both;
  color: red;
  background-color: red;
  height: 1px;
  border-width: 0;
}

<hr />
This is a test
<hr />

Answer 16

यह सरल है और मेरा पसंदीदा है।

<hr style="background-color: #dd3333" />

Answer 17

आप बूटस्ट्रैप बीजी क्लास जैसे जोड़ सकते हैं

<hr class="bg-light" />

Comments

यह मेरे लिए एकदम सही जवाब था, हालांकि मैंने इसे सीमा को समायोजित करके अतीत में किया है। BTW, बूटस्ट्रैप 4 इसे इस प्रकार करता है:.bg-light { background-color: #f8f9fa !important; }

— निकोरेलियस

Answer 18

चूंकि मेरे पास टिप्पणी करने के लिए प्रतिष्ठा नहीं है, इसलिए मैं यहां कुछ विचार दूंगा।

यदि आप एक सीएसएस चर ऊंचाई चाहते हैं, तो सभी सीमाओं को हटा दें और एक पृष्ठभूमि रंग दें।

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

यदि आप बस एक शैली चाहते हैं जो आप जानते हैं कि काम करेगा (उदाहरण: सीमा को बदलने के लिए :: सबसे पहले ईमेल ग्राहकों के लिए तत्व से पहले या

    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

दोनों तरीकों से, यदि आप एक चौड़ाई निर्धारित करते हैं, तो इसका आकार हमेशा रहेगा।

इसके लिए सेट करने की आवश्यकता नहीं है display:block;।

पूरी तरह से सुरक्षित होने के लिए, आप दोनों को मिला सकते हैं, 'क्योंकि कुछ ब्राउज़र इससे भ्रमित हो सकते हैं height:0px;:

    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

इस पद्धति से आप यह सुनिश्चित कर सकते हैं कि इसकी ऊंचाई कम से कम 2px होगी।

यह एक लाइन अधिक है, लेकिन सुरक्षा सुरक्षा है।

यह वह विधि है जिसका उपयोग आपको लगभग हर चीज के साथ संगत करने के लिए करना चाहिए।

याद रखें: जीमेल केवल इनलाइन सीएसएस का पता लगाता है और कुछ ईमेल क्लाइंट पृष्ठभूमि या सीमाओं का समर्थन नहीं कर सकते हैं। यदि कोई विफल रहता है, तो आपके पास अभी भी 1px लाइन होगी। कुछ नहीं से बेहतर।

सबसे खराब मामलों में, आप जोड़ने की कोशिश कर सकते हैं color:blue;।

सबसे बुरे मामलों में, आप एक <font color="blue"></font>टैग का उपयोग करने की कोशिश कर सकते हैं और अपना कीमती <hr/>टैग उसके अंदर डाल सकते हैं । यह <font></font>टैग कलर को इनहेरिट करेगा ।

इस विधि के साथ, आप करेंगे इस तरह करना चाहते हैं: <hr width="50" align="left"/>।

उदाहरण:

    <span>
        awhieugfrafgtgtfhjjygfjyjg
        <font color="#42B3E5"><hr width="50" align="left"/></font>
    </span>
    <!--Doesn't work in ie7 and below and in Quirks Mode-->

यहाँ आप की जाँच करने के लिए एक लिंक है: http://jsfiddle.net/sna2D/

Answer 19

आप सीएसएस का उपयोग एक अलग रंग के साथ एक लाइन बनाने के लिए कर सकते हैं, उदाहरण इस तरह होगा:

border-left: 1px solid rgb(216, 216, 216);
border-right: medium none;
border-width: medium medium medium 2px;
border-style: none none none solid;
border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color rgb(216, 216, 216);

वह कोड वर्टिकल ग्रे लाइन प्रदर्शित करेगा।

Answer 20

खैर, मैं HTML, CSS और Java में नया हूँ लेकिन मैंने अपने तरीके से कोशिश की जो मेरे लिए सभी ब्राउज़रों में काम करता है। मैंने CSS के बजाय JS का उपयोग किया है जो कुछ ब्राउज़रों के साथ काम नहीं करता है ।

सबसे पहले मैंने id="myHR"एचआर तत्व को दिया है और जावा स्क्रिप्ट में इसका उपयोग किया है।
यहाँ कोड है।

x = document.getElementById("myHR");
y = x.style.width = "600px";
y = x.style.color = "white";
y = x.style.height = "2px";
y = x.style.border = "none";
y = x.style.backgroundColor = "lightgrey";

Answer 21

1. कोड पुराने IE के लिए काम करता है

2. कई रंगों की कोशिश की

   <hr color="black">
   <hr color="blue">

Answer 22

क्षैतिज नियमों को संशोधित करने के लिए फ़ॉन्ट रंगों का उपयोग करना उन्हें अधिक लचीला और उपयोग करने में आसान बनाता है।

colorसंपत्ति, डिफ़ॉल्ट रूप से विरासत में मिला नहीं है, इसलिए निम्नलिखित जरूरतों घंटे के लिए जोड़ा जा करने के लिए रंग विरासत अनुमति देने के लिए:

/* allow hr to inherit color */
hr { border: 1px solid;}

/* reusable colour modifier */
.fc_-alpha { color: crimson;}

normal hr:

<hr>

hr with <span class="fc_-alpha">colour modifier</span>:

<hr class="fc_-alpha">

Answer 23

आप ऐसा कर सकते हैं:

hr {
  border: 1px solid red;
}

<hr />
This s a test
<hr />

Answer 24

आप <hr noshade>टैग दे सकते हैं और अपनी सीएसएस फ़ाइल में जा सकते हैं और जोड़ सकते हैं:

hr {
    border-top:0;
    color: #123455;
}

<hr noshade />
This s a test
<hr noshade />

Answer 25

एक सामान्य नियम के रूप में, आप बस सीएसएस के साथ एक क्षैतिज रेखा का रंग सेट नहीं कर सकते हैं जैसे आप कुछ और करेंगे। सबसे पहले, इंटरनेट एक्सप्लोरर को इस तरह से पढ़ने के लिए आपके सीएसएस में रंग की आवश्यकता है:

"रंग: # 123455"

लेकिन ओपेरा और मोज़िला को इस तरह से पढ़ने के लिए आपके सीएसएस में रंग की आवश्यकता है:

"पृष्ठभूमि-रंग: # 123455"

तो, आपको अपने सीएसएस में दोनों विकल्पों को जोड़ना होगा।

इसके बाद, आपको क्षैतिज रेखा को कुछ आयाम देने की आवश्यकता होगी या यह आपके ब्राउज़र द्वारा निर्धारित मानक ऊंचाई, चौड़ाई और रंग के लिए डिफ़ॉल्ट होगा। यहाँ एक नमूना कोड है जो आपके सीएसएस को नीले क्षैतिज रेखा को प्राप्त करने के लिए कैसा दिखना चाहिए।

hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}

या आप अपने HTML पृष्ठ पर सीधे शैली जोड़ सकते हैं जब आप एक क्षैतिज रेखा सम्मिलित करते हैं, जैसे:

<hr style="background:#123455" />

उम्मीद है की यह मदद करेगा।

Answer 26

मैंने प्रत्येक तरीके से एक शर्त ली:

  hr {
    border-top: 1px solid purple;
    border-color: purple;
    background-color: purple;
    color: purple;
  }