কীভাবে স্টাইল ইনপুট এবং সিএসএসের সাথে বোতাম জমা দিন?

Question

আমি সিএসএস শিখছি। কীভাবে স্টাইল ইনপুট এবং সিএসএসের সাথে বোতাম জমা দিন?

আমি এই জাতীয় কিছু তৈরি করার চেষ্টা করছি তবে কীভাবে করব তা আমার কোনও ধারণা নেই

<form action="#" method="post">
    Name <input type="text" placeholder="First name"/>
    <input type="text" placeholder="Last name"/>
    Email <input type="text"/>
    Message <input type="textarea"/>
    <input type="submit" value="Send"/>
</form>

Comments

আপনি এটি স্টাইল করতে পারেন যেমন আপনি অন্য যে কোনও উপাদানকে স্টাইল করেন

— এক্সপ্লোশন পিলস

stackoverflow.com/questions/3540380/...

— gaynorvader

গুরুত্বপূর্ণ বিষয় লক্ষণীয়, আপনি এটি স্টাইল করতে পারবেন না আপনি যেমন অন্য কোনও উপাদান। <input>ট্যাগগুলি পছন্দ মতো জিনিসগুলিকে সমর্থন করে না ::after।

— জামেঙ্গুল্ফার

সঠিক। সে কারণেই আমি মনে করি এটি ব্যবহার করা ভাল <button type="submit"><span>Send</span></button>। এর পরে আপনি ব্যবহার করতে পারেন ::afterউপর span-tag।

— কুনম্বি

Answer 1

http://jsfiddle.net/vfUvZ/

এখানে একটি সূচনা পয়েন্ট

সিএসএস:

input[type=text] {
    padding:5px; 
    border:2px solid #ccc; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=text]:focus {
    border-color:#333;
}

input[type=submit] {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

Answer 2

আপনি যে কোনও এইচটিএমএল উপাদানকে স্টাইল করবেন এমনভাবে আপনার জমা বোতামটি স্টাইল করুন। আপনি সিএসএস অ্যাট্রিবিউট সিলেক্টর ব্যবহার করে বিভিন্ন ধরণের ইনপুট উপাদানগুলিকে টার্গেট করতে পারেন

উদাহরণ হিসাবে আপনি লিখতে পারেন

input[type=text] {
   /*your styles here.....*/
}
input[type=submit] {
   /*your styles here.....*/
}
textarea{
   /*your styles here.....*/
}

অন্যান্য নির্বাচকদের সাথে একত্রিত

input[type=text]:hover {
   /*your styles here.....*/
}
input[type=submit] > p {
   /*your styles here.....*/
}
....

এখানে একটি কাজের উদাহরণ

Answer 3

এইচটিএমএল

<input type="submit" name="submit" value="Send" id="submit" />

সিএসএস

#submit {
 color: #fff;
 font-size: 0;
 width: 135px;
 height: 60px;
 border: none;
 margin: 0;
 padding: 0;
 background: #0c0 url(image) 0 0 no-repeat; 
}

Answer 4

আমি ব্যবহার না করে পরামর্শ দেব

<input type='submit'>

ব্যবহার

<button type='submit'>

সিএসএস স্টাইলিংয়ের কথা মাথায় রেখে বোতামটি প্রবর্তন করা হয়েছিল। আপনি এখন এতে গ্রেডিয়েন্ট পটভূমি চিত্র যুক্ত করতে পারেন বা CSS3 গ্রেডিয়েন্ট ব্যবহার করে এটি স্টাইল করতে পারেন।

এইচটিএমএল 5 ফর্ম কাঠামো সম্পর্কে আরও পড়ুন

http://www.w3.org/TR/2011/WD-html5-20110525/forms.html

চিয়ার্স! .Pav

Comments

এটি খুব সহায়ক ছিল, কারণ আইওএসের জন্য সাফারি আমার স্টাইলটিকে সঠিকভাবে বোতামগুলিতে প্রয়োগ করে, তবে <ইনপুট টাইপ = "জমা"> :) তে নয়

— ক্রাশডপিক্সেল

তবে তারপরে আপনি বোতামটির পাঠ্য হিসাবে মানটি নির্দিষ্ট করতে পারবেন না, বরং বোতাম ট্যাগগুলির মধ্যে << বাটন> পাঠ্য </ বাটন>

— উজেবেকেট্রেন্ট

Answer 5

নির্ভরযোগ্যতার জন্য আমি idউপাদানগুলিকে শৈলীতে নাম দেওয়ার বা সংক্ষিপ্তকরণগুলি দেওয়ার জন্য পরামর্শ দিই (আদর্শভাবে classপাঠ্য ইনপুটগুলির জন্য একটি , কারণ সম্ভবত বেশ কয়েকটি হবে) এবং idসাবমিট বাটনে একটি (যদিও classএটি পাশাপাশি কাজ করবে):

<form action="#" method="post">
    <label for="text1">Text 1</label>
    <input type="text" class="textInput" id="text1" />
    <label for="text2">Text 2</label>
    <input type="text" class="textInput" id="text2" />
    <input id="submitBtn" type="submit" />
</form>

সিএসএস সহ:

.textInput {
    /* styles the text input elements with this class */
}

#submitBtn {
    /* styles the submit button */
}

আরও আপ-টু-ডেট ব্রাউজারগুলির জন্য, আপনি গুণাবলী দ্বারা নির্বাচন করতে পারেন (একই HTML ব্যবহার করে):

.input {
    /* styles all input elements */
}

.input[type="text"] {
     /* styles all inputs with type 'text' */
}

.input[type="submit"] {
     /* styles all inputs with type 'submit' */
}

আপনি কেবল ভাইবোন সংযুক্তকারীগুলিও ব্যবহার করতে পারেন (যেহেতু শৈলীতে পাঠ্য ইনপুটগুলি সর্বদা কোনও labelউপাদান অনুসরণ করে এবং সাবমিটটি একটি টেক্সারিয়ার অনুসরণ করে (তবে এটি বরং ভঙ্গুর)):

label + input,
label + textarea {
    /* styles input, and textarea, elements that follow a label */
}

input + input,
textarea + input {
    /* would style the submit-button in the above HTML */
}

Answer 6

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

পরিবর্তে, আপনি নির্দিষ্ট কিছু চাইলে, আমি আপনাকে এমন লাইব্রেরি ব্যবহার করার পরামর্শ দেব যা আপনাকে স্টাইলযোগ্য ফর্ম উপাদান সরবরাহ করে provides يونيفارم.জেএস হ'ল একটি লাইব্রেরি।

Comments

@ বালিনকিংঅফমোরিয়াকে হ্যাঁ লাগছে। আমি লিঙ্কটি আপডেট করেছি।

— eis

Answer 7

স্ট্রিং করার সময় কোনও ইনপুট টাইপ জমা দেওয়ার জন্য নিম্নলিখিত কোডটি ব্যবহার করুন।

   input[type=submit] {
    background-color: pink; //Example stlying
    }

Answer 8

আসলে, এটি খুব দুর্দান্ত কাজ করে।

input[type=submit]{
                 width: 15px;
                 position: absolute;
                 right: 20px;
                 bottom: 20px;
                 background: #09c;
                 color: #fff;
                 font-family: tahoma,geneva,algerian;
                 height: 30px;
                 -webkit-border-radius: 15px;
                 -moz-border-radius: 15px;
                 border-radius: 15px;
                 border: 1px solid #999;
             }

Comments

এটি সম্পূর্ণরূপে ভয়াবহ

— র্যাবার্ট

Answer 9

আমি এখানে দেওয়া উত্তরের উপর ভিত্তি করে এটি করেছি, আমি আশা করি এটি সাহায্য করবে

.likeLink {
    background: none !important;
    color: #3387c4;
    border: none;
    padding: 0 !important;
    font: inherit;
    cursor: pointer;
}
    .likeLink:hover {
        background: none !important;
        color: #25618c;
        border: none;
        padding: 0 !important;
        font: inherit;
        cursor: pointer;
        text-decoration: underline;
    }

Answer 10

এইচটিএমএল

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Button</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<a href="#" class="btn">Push</a>
</div>
</body>
</html>

সিএসএস স্টাইলিং

a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
}

Comments

সাবমিট ইনপুট এর মতো এটি কীভাবে ব্যবহার করবেন?

— ব্যবহারকারী2307683

Answer 11

খুব সহজ:

<html>
<head>
<head>
<style type="text/css">
.buttonstyle 
{ 
background: black; 
background-position: 0px -401px; 
border: solid 1px #000000; 
color: #ffffff;
height: 21px;
margin-top: -1px;
padding-bottom: 2px;
}
.buttonstyle:hover {background: white;background-position: 0px -501px;color: #000000; }
</style>
</head>
<body>
<form>
<input class="buttonstyle" type="submit" name="submit" Value="Add Items"/>
</form>
</body>
</html>

এটি কাজ করে যাচ্ছি আমি পরীক্ষা করেছি।