এইচআর এলিমেন্টের রঙ পরিবর্তন করা

Question

আমি hrসিএসএস ব্যবহার করে আমার ট্যাগের রঙ পরিবর্তন করতে চাই । নীচের কোডটি আমি চেষ্টা করেছি বলে মনে হচ্ছে না:

hr {
    color: #123455;
}

Comments

শুধু এফওয়াইআই, আপনি অন্য রঙের সাথে যা করেছেন তা করার চেষ্টা করেছি এবং এটি ফায়ারফক্স 5 বিটাতে কাজ করে তবে IE 9 নয়, jsfiddle.net/TGtSd

@ কেওকি জি আমার (ক্রোম) জন্য কাজ করছে না।

— মার্টি

@ মার্টি ব্যাকগ্রাউন্ড-রঙ ক্রোমে কাজ করে তবে আপনি রঙটি ঠিক না ... অদ্ভুত ...

ক্রোম ব্যাকগ্রাউন্ড-

— কালারে

ঠিক আছে, যদি কেউ পরীক্ষা করতে চায় তবে এখানে এমন এক ঝাঁকুনি যাচ্ছি যাচ্ছি, jsfiddle.net/TGtSd/9 ...

Answer 1

আমি মনে করি আপনার border-colorপরিবর্তে ব্যবহার করা উচিত color, যদি আপনার উদ্দেশ্যটি উত্পাদিত লাইনের রঙ পরিবর্তন করে<hr> ট্যাগ ।

যদিও, এটি মন্তব্যে উল্লেখ করা হয়েছে যে, আপনি যদি আপনার লাইনের আকার পরিবর্তন করেন তবে শৈলীতে আপনি যেমন নির্দিষ্ট করেছেন তেমন সীমানা তত প্রশস্ত হবে এবং লাইনটি ডিফল্ট রঙে পূর্ণ হবে (যা বেশিরভাগ পছন্দসই প্রভাব নয়) সময়)। সুতরাং দেখে মনে হচ্ছে এই ক্ষেত্রে background-colorআপনারও নির্দিষ্ট করতে হবে (যেমন @ আইবু তার উত্তরে প্রস্তাবিত)।

এইচটিএমএল 5 বয়লারপ্লেট প্রকল্পটি তার ডিফল্ট স্টাইলশিটে নিম্নলিখিত বিধিটি নির্দিষ্ট করে:

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

সাইটপয়েন্ট দ্বারা সম্প্রতি প্রকাশিত “12 লিটল-জ্ঞাত সিএসএস ফ্যাক্টস” শীর্ষক একটি নিবন্ধে উল্লেখ করা হয়েছে যে আপনি যদি উল্লেখ করেন তবে এটি তার পিতামাতার কাছে <hr>সেট করতে border-colorপারে ।colorhr { border-color: inherit }

Comments

সীমানা-রঙের সমস্যাটি হ'ল আপনি যদি ঘন্টাটি বৃহত্তর করেন তবে এটি কেবল সীমানাকে রঙ করে, jsfiddle.net/TGtSd/9 ...

@ অ্যান্টন এটিই নয় যা আমি এইচআরটির আকার সম্পর্কে উল্লেখ করছি ... আপনি যদি উচ্চতা বৃদ্ধি করেন এবং আপনি কেবল সীমানার রঙ ব্যবহার করেন তবে আপনি একটি রঙিন সীমানা সহ একটি আয়তক্ষেত্র পাবেন তবে অভ্যন্তরটি হবে না রঙিন ...

এমনকি কেন সীমানা নিয়ে মোটেও বিরক্ত করবেন? কেন এটি কেবল একটি পটভূমির রঙ দেয় না এবং এটি দিয়েই করা হবে? সম্পাদনা: এনভিএম, আমি ব্রাউজারের সামঞ্জস্যের উত্তরটি দেখতে পাইনি।

— আইনজীবী

Answer 2

• border-colorকাজ ক্রোম এবং সাফারি ।
• background-color ফায়ারফক্স এবং অপেরাতে কাজ করে।
• colorআই 7 + এ কাজ করে ।

Comments

আমরা যদি আমাদের সাইটটি সমস্ত ব্রাউজারে দেখতে পাই, তবে আমাদের কি সেগুলি ব্যবহার করা উচিত?

— এমএম

border-color ক্রোমে কাজ করে না । এটি সাদা পটভূমিতে সাদাতে সেট করার চেষ্টা করুন। এই দুটি কাজ করবে: হয় 1) color:white; border-style:solid; বা 2) border-color:white; border-style:solid; ।

— পেসারিয়ার

@ পেসারিয়র হ্যাঁ এটি করে। একটি শৈলী এবং / বা প্রস্থ নির্দিষ্ট করতে হবে

— GôTô

তথ্য পুনরায়। আইই (কমপক্ষে) ভুল। 'সীমান্ত-বর্ণ' আইইতে দুর্দান্ত কাজ করে; 'রঙ' দেয় না (আইই 11)

— তাইজি 123

Answer 3

আমি মনে করি এটি কার্যকর হতে পারে। এটি ছিল সহজ সিএসএস নির্বাচক।

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

Comments

এটি অবশ্যই ক্রোম ডেস্কটপে আমার জন্য কাজ করেছে: <স্টাইল> এইচআর r ব্যাকগ্রাউন্ড-রঙ: লাল; উচ্চতা: 1px; সীমানা: 0; } </style> <hr>

— মাইকেল

ক্রোম এবং ফায়ারফক্স উভয় ক্ষেত্রেই আমার জন্য কাজ করে

— রবার্ট সি

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

এখানে সেরা উত্তর। উচ্চতা 0 পিক্সারে সেট করা এবং সীমানা ডো যুক্ত করে এইচআর 2 পিক্স প্রশস্ত করা যায় না। দুর্দান্ত ডাক !!

— বব রবার্টস

Answer 8

আমি বিশ্বাস করি এটি সবচেয়ে কার্যকর পদ্ধতি:

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

অথবা আপনি যদি সমস্ত ঘন্টা উপাদানগুলিতে এটি করতে পছন্দ করেন তবে এটি আপনার CSS এ লিখুন:

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

Answer 9

ঘন্টা
{
রঙ: # f00;
পটভূমি-রঙ: # f00;
উচ্চতা: 5px;
}

Answer 10

hr
{
  background-color: #123455;
}

পটভূমি হ'ল আপনার পরিবর্তন করার চেষ্টা করা উচিত

আপনি সীমানা রঙের সাথেও কাজ করতে পারেন। আমি নিশ্চিত নই যে আমি মনে করি এটি নিয়ে ক্রসব্রোজার সমস্যা রয়েছে। আপনার এটি পৃথক ব্রাউজারগুলিতে পরীক্ষা করা উচিত

Comments

আমি এটি ফায়ারফক্স 5 বিটা, আই 9, ক্রোম, অপেরা এবং সাফারিতে চেষ্টা করেছি ... আপনি ভাল, তারা সকলেই কাজ করেন;)

@ কুল, কোন অংশটি কাজ করে না? পেছনের রঙ? বা সীমানা-রঙ? আমি সবেমাত্র সীমানার রঙ পরীক্ষা করেছি: নীল; এবং এটি ক্রোমে কাজ করেছে

— আইবু

[সীমান্তের রঙ] ক্রোমে কাজ করে। [ব্যাকগ্রাউন্ড-রঙ] না। আমি যথেষ্ট প্রতিনিধি থাকলে আমি ভোট দিতে হবে।

— সমথ্রব্রেন্ড

Answer 11

যদি আপনি সিএসএস ক্লাস ব্যবহার করেন তবে এটি সমস্ত 'এইচআর' ট্যাগ দ্বারা নেওয়া হবে, তবে আপনি যদি কোনও 'এইচআর' চান তবে নীচের কোডটি ব্যবহার করুন, ইনলাইন সিএসএস

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

যদি এটি ক্রোমে কাজ না করে কোডের নীচে চেষ্টা করুন:

<hr color="red" />

Answer 12

এখানে সমস্ত উত্তর পড়ার পরে, এবং বর্ণিত জটিলতাটি দেখে, আমি এইচআর পরীক্ষার জন্য একটি ছোট ডাইভার্সন শুরু করি। এবং, উপসংহারটি হল যে আপনি নিজের দ্বারা লেখা বেশিরভাগ বানকিপ্যাচ সিএসএসকে ছুঁড়ে ফেলতে পারেন, এই ছোট্ট প্রাইমারটি পড়তে পারেন এবং খাঁটি সিএসএসের এই দুটি লাইন ব্যবহার করতে পারেন:

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

যে সব আপনি শৈলী আপনার ঘন্টা প্রয়োজন।

• ক্রস ব্রাউজার, ক্রস-ডিভাইস, ক্রস-ওএস, ক্রস-ইংলিশ-চ্যানেল, ক্রস-এজ।
• না "আমার মনে হয় এটি কাজ করবে ..." , "আপনার সাফারি / আইই মাথায় রাখা দরকার ..." , ইত্যাদি etc.
• কোন অতিরিক্ত CSS - কোনো height, width, background-color, color, ইত্যাদি জড়িত।

কেবল বুলেটপ্রুফ রঙিন এইচআরএস। এটা সেই সহজ ^টিএম ।

---

বোনাস: এইচআরকে কিছু উচ্চতা দেওয়ার জন্য H, কেবলমাত্র border-widthহিসাবে সেট করুন H/2।

Comments

আমি প্রতিটি উপায়ে একটি বাজি নিয়েছি: `` `hr {সীমানা শীর্ষ: 1 পিএক্স শক্ত বেগুনি; সীমানা-রঙ: বেগুনি; পটভূমি রঙ: বেগুনি; রঙ: বেগুনি; } ~~~

— ডেভিড জোনস

ফায়ারফক্সে কাজ করে না, background-colorকরে না।

— ক্রম

Answer 13

কিছু ব্রাউজার colorঅ্যাট্রিবিউট ব্যবহার করে এবং কিছু background-colorঅ্যাট্রিবিউট ব্যবহার করে । নিরাপদ হতে:

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

Answer 14

আমি IE, ফায়ারফক্স এবং ক্রোম মে মে 2015 এ পরীক্ষা করছি এবং এটি বর্তমান সংস্করণগুলির সাথে সেরা কাজ করে। এটি এইচআরটিকে কেন্দ্র করে এবং এটি 70% প্রশস্ত করে তোলে:

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

<hr class="light" />

Comments

এই কি আমি সন্ধান করছিলাম নিখুঁতভাবে। আমার ভুলটি হ'ল আমি CSS সংজ্ঞা (ঘন্টা। হালকা {})

— করছিলাম

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

দেখা যাচ্ছে এটি আমার পক্ষে সঠিক উত্তর ছিল, যদিও আমি সীমান্ত সামঞ্জস্য করে অতীতে এটি করেছি। বিটিডাব্লু, বুটস্ট্র্যাপ 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*/
    }

উভয় উপায়েই, আপনি যদি প্রস্থ সেট করেন তবে সর্বদা এর আকার হবে have

এটির display:block;জন্য কোনও সেট করার দরকার নেই ।

সম্পূর্ণ সুরক্ষিত হতে, আপনি উভয়ই মিশ্রিত করতে পারেন, কারণ কিছু ব্রাউজার এতে বিভ্রান্ত হতে পারে height:0px;:

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

এই পদ্ধতির সাহায্যে আপনি নিশ্চিত হতে পারেন যে এটির উচ্চতা কমপক্ষে 2px হবে।

এটি আরও লাইন, তবে সুরক্ষা হল সুরক্ষা।

প্রায় সবকিছুর সাথে সামঞ্জস্য রাখতে আপনার এই পদ্ধতিটি ব্যবহার করা উচিত।

মনে রাখবেন: Gmail কেবল ইনলাইন সিএসএস সনাক্ত করে এবং কিছু ইমেল ক্লায়েন্ট ব্যাকগ্রাউন্ড বা সীমানা সমর্থন করতে পারে না। যদি কোনওটি ব্যর্থ হয় তবে আপনার কাছে এখনও 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

আপনি ভিন্ন রঙের সাথে একটি লাইন তৈরি করতে CSS ব্যবহার করতে পারেন, উদাহরণটি এরকম হবে:

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

ঠিক আছে, আমি এইচটিএমএল, সিএসএস এবং জাভাতে নতুন কিন্তু আমি আমার পথটি চেষ্টা করেছি যা সমস্ত ব্রাউজারে আমার পক্ষে কাজ করে। আমি সিএসএসের পরিবর্তে জেএস ব্যবহার করেছি যা কিছু ব্রাউজারের সাথে কাজ করে না ।

সবার আগে আমি 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;
}

অথবা আপনি যখন কোনও অনুভূমিক রেখাটি প্রবেশ করান তখন আপনি সরাসরি আপনার এইচটিএমএল পৃষ্ঠায় শৈলী যুক্ত করতে পারেন:

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

আশাকরি এটা সাহায্য করবে.

Answer 26

আমি প্রতিটি উপায়ে বাজি নিয়েছি:

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