সিএসএস / এইচটিএমএল: একটি ইনপুট ক্ষেত্রের চারপাশে একটি ঝলমলে সীমানা তৈরি করুন

Question

আমি আমার ফর্মটির জন্য কিছু শালীন ইনপুট তৈরি করতে চাই এবং আমি সত্যিই জানতে চাই যে কীভাবে টুইটার তাদের ইনপুটগুলির চারপাশে তাদের ঝলকানো সীমানা করে।

টুইটার সীমান্তের উদাহরণ / চিত্র:

বৃত্তাকার কোণগুলি কীভাবে তৈরি করতে হয় তা আমি বেশ জানি না।

Comments

এখানে একটি টিউটোরিয়াল যা আপনাকে শিখায়: CSS-এর ছায়া সহ ঝকঝকে প্রভাব

— টাউন

@ টাউনটির লিঙ্কটি অকার্যকর বলে মনে হচ্ছে: পুনঃনির্দেশ লুপ।

— জেরল্ডহাস

Answer 1

আপনি এখানে যান:

.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

লাইভ ডেমো: http://jsfiddle.net/simevidas/CXUpm/1/show/

(ডেমোটির কোড দেখতে, ইউআরএল থেকে "শো /" সরান)

label { 
    display:block;
    margin:20px;
    width:420px;
    overflow:auto;
    font-family:sans-serif;
    font-size:20px;
    color:#444;
    text-shadow:0 0 2px #ddd;
    padding:20px 10px 10px 0;
}

input {
    float:right;
    width:200px;
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
    margin-top:-10px;    
}

input:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

<label> Aktuelles Passwort: <input type="password"> </label>
<label> Neues Passwort: <input type="password"> </label>

Comments

আমি কীভাবে এই আভা সঞ্চার করতে পারি?

— 3lvis

@ এনএসইলভিস উদাঃ transition: box-shadow linear 1s jsfiddle.net/simevidas/6LyWe/1

— Vidas

খুব সুন্দর. একটি জিনিস, আপনি যদি কেবল এটি পাঠ্য ইনপুট ক্ষেত্রে প্রয়োগ করতে চান তবে আপনি নির্বাচককে সীমাবদ্ধ করতে চান: ইনপুট [প্রকার = পাঠ]: ফোকাস, ইনপুট [টাইপ = পাসওয়ার্ড], ইনপুট [টাইপ = টেক্সারিয়া]।

— মাইকেল কেনেডি

@ মিশেল কেনেডি বাস্তব বিশ্বের অ্যাপ্লিকেশনগুলিতে যথেষ্ট হবে না। স্ট্যান্ডার্ড পদ্ধতির ক্লাস হবে, যেমন .glowing-input { … }।

— Vidime Vidas

অবশ্যই, আমার বক্তব্যটি হ'ল রেডিও বোতামগুলিতে প্রয়োগ করা, বোতাম জমা দেওয়া ইত্যাদি etc.

— মাইকেল কেনেডি

Answer 2

এরকম কিছু সম্পর্কে কীভাবে ... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/

সিএসএস

input {
    border: 1px solid #4195fc; /* some kind of blue border */

    /* other CSS styles */

    /* round the corners */
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px #4195fc;
       -moz-box-shadow: 0px 0px 4px #4195fc;
            box-shadow: 0px 0px 4px #4195fc; /* some variation of blue for the shadow */

}

Comments

এটি আউট এবং আউট সহজ হচ্ছে না

— rubo77

তাতে কি? গৃহীত উত্তরটি সহজেই সহজে কাজ করে না। মূল প্রশ্নটি (এবং আমার উত্তর) ২০১১ সালে পোস্ট করা হয়েছিল এবং আমি নিশ্চিত যে টুইটারের ঝলকানো সীমানাগুলিও অভ্যন্তরীণভাবে বা সহজতর হয় নি। আরও, প্রশ্নটি আরাম-আউট-এর উপর দৃষ্টি নিবদ্ধ করে না, বরং বৃত্তাকার কোণগুলি দিয়ে সীমান্তকে কীভাবে আলোকিত করা যায়, যার উত্তর আমি দিয়েছি। আমি মনে করি না যে আমাকে সহজেই বাইরে যেতে হবে কারণ কোনও সহজলভ্যতা নেই

— হিস্টো

Answer 3

একটি সাধারণ নীল border, একটি মাঝারি border-radiusএবং box-shadowঅবস্থান সহ একটি নীল ব্যবহার করুন 0 0।

Answer 4

স্ল্যাक्सগুলি মাথায় পেরেকটি আঘাত করে তবে আপনি সাধারণভাবে CSS3 এ ইনপুটগুলির পরিবর্তনগুলি দেখতে চাইতে পারেন। গোলাকার কোণ এবং বাক্স-ছায়া উভয়ই CSS3-এ নতুন বৈশিষ্ট্য এবং আপনি যা খুঁজছেন ঠিক তা করতে দেবে। সিএসএস 3 / এইচটিএমএল 5 এর জন্য আমার ব্যক্তিগত পছন্দের লিঙ্কগুলির একটি হ'ল http://diveintohtml5.ep.io/ ।

Answer 5

আমি পূর্ববর্তী দুটি উত্তর ( jsfiddle ) একত্রিত ।

input {
    /* round the corners */
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;    
}

input:focus { 
    outline:none;
    border: 1px solid #4195fc; 
    /* create a BIG glow */
    box-shadow: 0px 0px 14px #4195fc; 
    -moz-box-shadow: 0px 0px 14px #4195fc;
    -webkit-box-shadow: 0px 0px 14px #4195fc;  
}​

Answer 6

সামান্য কম ঝলকানো সংস্করণ সহ সংশোধিত সংস্করণ।

input {
    /* round the corners */
    //background-color: transparent;
    border: 1px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;    
}

input:focus { 
    outline:none;
    border: 1px solid #4195fc; 
    /* create a BIG glow */
    box-shadow: 0px 0px 5px #4195fc; 
    -moz-box-shadow: 0px 0px 5px #4195fc;
    -webkit-box-shadow: 0px 0px 5px #4195fc;  
}

Answer 7

input[type="text"]{
   @include transition(all 0.30s ease-in-out);
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
input[type="text"]:focus{
  @include box-shadow(0 0 5px rgba(81, 203, 238, 1));
  -webkit-box-shadow: 0px 0px 5px #007eff;  
  -moz-box-shadow: 0px 0px 5px #007eff;  
  box-shadow: 0px 0px 5px #007eff;
}

Answer 8

নীচে বুটস্ট্র্যাপ ব্যবহার করা কোড রয়েছে। রঙগুলি কিছুটা আলাদা তবে ধারণাটি একই। আপনি যদি সিএসএস সংকলনের জন্য কম ব্যবহার করছেন:

// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-focus-border` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.

.form-control-focus(@color: @input-border-focus) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  &:focus {
    border-color: @color;
    outline: 0;
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  }
}

আপনি যদি কম ব্যবহার না করেন তবে সংকলিত সংস্করণটি এখানে:

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

Answer 9

এটি আলোকিত ইনপুট ক্ষেত্র এবং টেক্সারিয়াস তৈরি করবে:

textarea,textarea:focus,input,input:focus{
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;
}

input:focus,textarea:focus { 
    outline: none;
    border: 1px solid #7bc1f7;
    box-shadow: 0px 0px 8px #7bc1f7;
    -moz-box-shadow: 0px 0px 8px #7bc1f7;
    -webkit-box-shadow: 0px 0px 8px #7bc1f7;
}

Answer 10

$('.form-fild input,.form-fild textarea').focus(function() {
    $(this).parent().addClass('open');
});

$('.form-fild input,.form-fild textarea').blur(function() {
    $(this).parent().removeClass('open');
});

.open {
  color:red;   
}
.form-fild {
	position: relative;
	margin: 30px 0;
}
.form-fild label {
	position: absolute;
	top: 5px;
	left: 10px;
	padding:5px;
}

.form-fild.open label {
	top: -25px;
	left: 10px;
	/*background: #ffffff;*/
}
.form-fild input[type="text"] {
	padding-left: 80px;
}
.form-fild textarea {
	padding-left: 80px;
}
.form-fild.open textarea, 
.form-fild.open input[type="text"] {
	padding-left: 10px;
}
textarea,
input[type="text"] {
	padding: 10px;
	width: 100%;
}
textarea,
input,
.form-fild.open label,
.form-fild label {
	-webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
    	<form>
        <div class="form-fild">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Email :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Number :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Message :</label>
            <textarea cols="10" rows="5"></textarea>
        </div>
    </form>
    </div>
</div>

Answer 11

আপনি আরও ভালভাবে টুইটার বুটস্ট্র্যাপ ব্যবহার করুন যার মধ্যে এই সুন্দর জিনিসগুলি রয়েছে। বিশেষত এখানে আপনি যা চান ঠিক তা এখানে ।

এছাড়াও, আপনি এই ওয়েবসাইট থেকে টুইটার বুটস্ট্র্যাপের জন্য নির্মিত বিভিন্ন থিম ব্যবহার করতে পারেন

Comments

বুটস্ট্র্যাপ ফর্মগুলির স্থির ভাঙা লিঙ্ক

— রাফিয়ান