We Keep Coding

Styling the html input to have round border

I have a input box which using the x button to clear the filed. But with adding this addition attribute to the input box the border of the input has two styles now.
In the below image the input box right border is round where as left border is straight. How I can make the border style round for both side?
code:
<div class="input-group">
<div class="btn-group has-feedback has-clear">
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
<span id="searchclear3"
class="glyphicon glyphicon-remove-circle form-control-feedback form-control-clear input-group-text"
style="pointer-events:auto; text-decoration:none; cursor:pointer;"
onclick="$(this).prev('input').val('');return false;">
</span>
</div>

There are several ways:
You can use the simplest css
input {
border-radius: 50px; /*If it doesn't work add !important*/
}
Or a js code
const input = document.querySelector('input');
input.style.borderRadius = '50px';
Or you can use a bootstrap class that is already preset (I see you are using bootstrap 4)
form-control-rounded
In this way:
<input type="text" class="form-control form-control-rounded" id="basic-url" aria-describedby="basic-addon3">

Use the CSS property border-radius to style it.
It has four values for each side, however, if only one value is passed, it will set it to the entire border.
Therefore, the CSS should look similar to this:
#form-control {
border-radius: 10px;
}

Strange behaviour on HTML inputs on IOS Safari

I have an interface of four numeric inputs for pin entry. As an input is populated the next is selected to give focus.
html:
<div class="pinInputs">
<div class="pinInputsWrapper">
<div class="small-2 large-2 columns">
<input name="pinInput1"
id="pinInput1"
tabindex="1"
maxlength="1"
pattern="[0-9]"
autofocus="true"
data-autofocus="true"
type="tel" />
</div>
<div class="small-2 large-2 columns">
<input name="pinInput2"
id="pinInput2"
tabindex="2"
maxlength="1"
pattern="[0-9]"
type="tel" />
</div>
<div class="small-2 large-2 columns">
<input name="pinInput3"
id="pinInput3"
tabindex="3"
maxlength="1"
pattern="[0-9]"
type="tel" />
</div>
<div class="small-2 large-2 columns">
<input name="pinInput4"
id="pinInput4"
tabindex="4"
maxlength="1"
pattern="[0-9]"
type="tel" />
</div>
</div>
</div>
CSS:
.pinInputs {
max-width: 16.4em;
margin: 0 auto;
}
.pinInputsWrapper {
height: 3.2em;
}
.columns {
margin: 0 2.5%;
float:left;
width:20%;
height:100%;
}
input {
font-size: 1.5em;
color: #024734;
text-align: center;
margin-bottom: 0;
height: 100%;
padding: 0;
width: 100%;
}
input:not(:focus){
-webkit-text-security: disc;
-mox-text-security: disc;
-moz-text-security: disc;
-o-text-security: disc;
text-security: disc;
color: #31953e;
}
Javascript:
$("input").bind("input change", function(ev) {
var index = parseInt(ev.srcElement.id.slice(-1));
if (index < 4 && ev.srcElement.value) {
$('#pinInput' + (index+1)).select();
}
});
I've created it in this jsfiddle:
https://jsfiddle.net/ek7rhgsj/8/
To Reproduce the issue:
Populate the inputs with single digit numeric characters and then move back deleting the content as you go. When all inputs are empty re-populate. The disc is now pushed to the bottom of the input rather thhan being vertically aligned. This is only reproducable on mobile safari. I can see it on iphones running ios 8.1.1, ios 8.2 and 9. It's possibly there on other versions but these are all the test devices I have available at the moment. Has anyone seen similar before and if so is there a workaround?
Any ideas greatly appreciated
C

OK I found a solution for this.
Given that I was able to produce this easily in jsfiddle I knew it wasn't anything to do with the js framework I was using (mithril) but rather a browser specific issue. Since safari runs a different engine to chrome I thought that the way the input boxes were being selected to change focus was the probable cause. I didn't dig into this very deeply but using the element.focus() method in place of select solved the issue for me and had no other cross browser issues. If anyone has an explanation that goes a bit deeper I'd love to hear it :)
Thanks,
C

Checkbox image label Select effect only applying on hover, not when checked

I have check boxes which I have images set for the labels, and I'm using code which applies an effect when hovered over. However when tested in a fiddle the hover effect stays when selected and doesn't show the actual check tick box, only issue with the fiddle is that this only works on the last checked not all checked.
However when I apply this to my site only the hover effect works, the effect doesn't stay on any selected and the tick boxes stay visible.
The fiddle: http://jsfiddle.net/Zgh24/1169/
The only differences between that in my code is that the DIV it is in also has classes, I'm using bootstrap.
HTML:
<div id="sites" class="navbar navbar-inverse" style="padding:5px">
<input type="checkbox" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label>
<input type="checkbox" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label>
<input type="checkbox" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
</div>
CSS:
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
background-color: #ccc;
}
#sites label {
display: inline-block;
cursor: pointer;
}
#sites label:hover {
background-color: #ccc;
}
#sites label img {
padding: 3px;
}
JS:
<script>
$('#sites input:checkbox').addClass('input_hidden');
$('#sites label').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
</script>
So my issue is sort of 2, I have a Fiddle which sort of does what I want, and then the fiddle I do have doesn't full work when I implement it.
I'm assuming I possibly have some css which is conflicting with that I'm trying to do, but I don't see how or what.
Any help is very appreciated -Tom

You could use only CSS pseudo class :checked and targeting next sibling label:
input[type=checkbox]:checked + label img
Finally, you should use as CSS rules:
#sites label:hover img,
#sites input[type=checkbox]:checked + label img {
background-color: #ccc;
}
DEMO jsFiddle
FYI, you could wish in some case to use instead of checkboxes radio buttons as in this jsFiddle:
http://jsfiddle.net/Zgh24/1173/
That could let you use persistant style on some element using only CSS with radio buttons hiddden:
http://jsfiddle.net/Zgh24/1174/

May be not sure.. the class .selected is used by bootstrap core and that style is applied to your label element.
Use your browser to see what style is applied.

How to change background-color of a "li" if I put the cursor in an input field inside the "li"? [duplicate]

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
Is it possible to set the background-color of the li when I put the cursor in a or b or c?
I have this list with 100 records and I want the hole row ("li") to show up in another color so it gets more easy to work with the list.
<li id=recordsArray_1>
<form medthod=post name=fr_1 id=fr_1>
<input type=text name=a> <input type=text name=b> <input type=text name=c>
<input type=submit name=b_1 value=ok>
</form>
</li>
<li id=recordsArray_2>
<form medthod=post name=fr_2 id=fr_2>
<input type=text name=a> <input type=text name=b> <input type=text name=c>
<input type=submit name=b_2 value=ok>
</form>
</li>
<li id=recordsArray_3>
<form medthod=post name=fr_3 id=fr_3>
<input type=text name=a> <input type=text name=b> <input type=text name=c>
<input type=submit name=b_3 value=ok>
</form>
</li>
.etc .... > 100

You can have a sibling element to the input elements and make it cover the li with background color on hover.
CSS
input[type=text]:focus~div {
background-color:red;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: -1;
}
li {
position:relative;
}
jsfiddle

You can't do this with pure css, you'll need to use javascript / jQuery:
$("input[type='text']").focus(function(){
$("li").removeClass("background");
$(this).closest("li").addClass("background");
});
See: http://jsfiddle.net/HF5Tx/

Even though there is no parent selector, you have a hover state on the li triggered by the hover of the children (the hover bubbles).
One posibility is to use that state, and if you want to avoid the change when the cursor is on the li, but not on the inputs, just disable the hover event:
CSS
li {
position:relative;
z-index: 1;
pointer-events: none;
}
li:hover {
background-color: red;
}
input {
position: relative;
z-index: 2;
pointer-events: all;
}
fiddle

Is it possible to set the background-color of the "li" when I put the cursor in on of its children inputs?
No, unfortunately the :focus selector does not work on the ancestors of the focused element, so you cannot detect that. :active would, but does only flash in the moment of the click.
The :hover selector (applied to the li) could do it, assuming you're using mouse navigation it would have a similar effect - and also help while viewing the table, not only when filling out inputs. However, it doesn't work with keyboard-based navigation.
So you can only resort to JS (using jQuery for an example, same is easily achievable with native DOM):
var $lis = $("li");
$lis.find("input:text").focus(function(e) {
$lis.css("background-color", "none");
$(this).closest("li").css("background-color", "red");
});

CSS Grid System for Forms (Multi-Column)

For future reference here is the final result with pixel perfect precision:
The CSS code:
._25 {
width: 21%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._50 {
width: 46%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._75 {
width: 71%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._100 {
width: 96%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
width: 100%;
}
input {
border: 1px solid #B3B3B3;
width: 100%;
-moz-border-radius: 3px;
}
textarea {
border: 1px solid #B3B3B3;
width: 100%;
-moz-border-radius: 3px;
}
select {
border: 1px solid #B3B3B3;
width: 100%;
-moz-border-radius: 3px;
}
And some sample HTML code:
<div class="_50">
<p><label for="in_user">Username</label><input id="in_user" type="text" value=""/></p>
</div>
<div class="_50">
<p><label for="in_pass">Password</label><input id="in_pass" type="text" value=""/></p>
</div>
Recently I've started using CSS grid systems and I find the whole process of designing a webpage much more simpler. Now I'm trying to stylize form elements but I'm having a really hard time making forms with columns, take the following example:
div (width = 400px)
form
ul
li .half
label
input (should be 200px wide)
li .half
another label
another input (should also be 200px wide)
Basically I'm applying a class that has a width attribute of 50% but putting both inputs side by side makes the row to be bigger than 100% (400px) - I guess this is because of borders, margins and paddings.
Is there any CSS grid system that I can use to have multi-column forms while still making all the form elements have the same size (inputs, selects and textareas); eg. 1 input in 1 column should have 400px while 2 columns should have 200px each.
EDIT: Wufoo has some examples of what I'm trying to do but I'm too ignorant at CSS to understand all that code and I would appreciate if someone could give me some pointers.

First off, do not use a table. Putting form elements in a table does not solve your problem and complicates your maintenance. Using tables to supplement form presentation is a sign of incompetence and complexity. It is also entirely non-semantic. Instead you might actually have to write some CSS. Honestly, if you are going to use tables for non-tabular data then don't even bother using CSS as that multiplies the complexity of maintenance.
Here are some things to keep in mind:
1) Define all your units in "em" units. Most form elements are intended to contain text. Those elements, like text fields and textarea blocks, can be increased and decreased as a feature of accessibility. This means your pixel perfect pretty CSS grid will break the moment a user changes text size on the page.
2) Don't wrap your form element in a div. Like a div, your form is a block level element. Unless the form has peer nodes under a div parent simply direct any presentation directly to the form element and not a parent element that exists only to contain the form.
3) Group your form elements. If you are floating text fields things can get all messed up if the forms are floated independently of their respective label elements. It will be easier to put an ordered list inside your form and then wrap each form element in a list item. This way you only have to worry about defining layout of the label element relative to its form control and then layout of them together by defining presentation of the list item. This method is also semantic and informs text readers of an order upon your form controls.
4) Don't use the !important declaration. This makes for a quick fix in your CSS but completely screws up inheritance and absolutely complicates maintenance. Instead take the extra time to write your code correctly the first time, so that future maintenance is a quick and minor event.
5) Don't use position absolute, unless you really know what you are doing, even if your form is set to position relative. Position absolute results in unexpected behaviors in many cases and unexpected problems.
6) To ensure your CSS code actually defines a true grid use the Firefox MeasureIt plug in. It will help you achieve stunning accuracy and save you incredible time when making your grid.
7) Do everything correctly the first time using as little code as necessary to get the job complete and present your form perfectly. Only then test your form for cross browser accuracy. Make one correction for cross browser accuracy at a time to limit unnecessary bloating to your CSS code.

Something like this may help. This is how I did it on a form.
It will take some fine tuning though to make it work at your desired width. This might help you get started though.
The CSS:
.contact ul {margin:0; padding:0; list-style:none;}
.contact li {margin-bottom:10px; overflow:hidden;}
.contact label {display:block; margin-bottom:2px;}
.contact label span {color:#999;}
.contact .input {width:592px; border:1px solid #E0E0E0; background:#F6F6F6;}
.contact select.input {border:1px solid #E0E0E0; background:#F6F6F6;}
.contact .third {float:left; width:193px; margin-right:10px;}
.contact .third .input {width:185px;}
.contact .half {float:left; width:294px; margin-right:10px;}
.contact .half .input {width:286px;}
.contact .half select.input {width:294px;}
.contact .omega {margin-right:0;}
The HTML:
<form action="/contact-us" method="post" class="contact">
<ul>
<li>
<div class="half">
<label for="name">Name:</label>
<input type="text" id="name" name="name" class="input" />
</div>
</li>
<li>
<label for="address">Address:</label>
<input type="text" id="address" name="address" class="input" />
</li>
<li>
<div class="third">
<label for="city">City:</label>
<input type="text" id="city" name="city" class="input" />
</div>
<div class="third">
<label for="state">State:</label>
<input type="text" id="state" name="state" class="input" />
</div>
<div class="third omega">
<label for="zip">Zip:</label>
<input type="text" id="zip" name="zip" class="input" />
</div>
</li>
</ul>
</form>

Here's a basic kickoff example which may be of use:
<!doctype html>
<html lang="en">
<head>
<style>
fieldset { width: 400px; padding: 1%; }
input[type=text], select, textarea { width: 98%; }
.half { float: left; width: 48%; padding: 1%; }
.full { clear: both; width: 98%; padding: 1%; }
.right { text-align: right; }
</style>
</head>
<body>
<fieldset>
<legend>Contact form</legend>
<form>
<div class="half">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="half">
<label for="email">Email</label>
<input type="text" id="email" name="email">
</div>
<div class="half">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<label for="country">Country</label>
<select id="country" name="country"><option></option></select>
</div>
<div class="full">
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</div>
<div class="half">
<input type="checkbox" id="copy" name="copy">
<label for="copy">Send me a copy</label>
</div>
<div class="half right">
<input type="submit" value="send">
</div>
</form>
</fieldset>
</body>
</html>
Note that I am using left-floated div's of half-width instead of unordered list items.
As you insist in using percentages, don't expect it to be pixelperfect in all browsers. If you want to have it all pixelperfect, you really need to use pixels.

I think this is what you are looking for:
http://www.alistapart.com/articles/prettyaccessibleforms/
It should help simplify your structure a little bit. It doesn't explicitly describe how to make multiple column forms, but the technique could probably expand to that with some creativity on your part.

No need for the fluid 960 system here, unless you want the form to expand and contract with the browser.
I would recommend the regular old 960 grid system for this. 960 width is great for grids because it divides evenly by 12 and 16 which allows you to set up pixel perfect three and four column layouts.
The best way to get familiar with the 960 grid system is to look at the souce css and the source of the html demo
<div class="grid_6">
<p>
contact form
</p>
</div>
<div class="grid_3">
<p>
name
</p>
</div>

I had to do something similar and ended up setting my half-columns to 46%. It leaves an extra bit of room for the padding and gets all your input fields consistently sized.

One answer is Blueprint. I have read where you don't think it's the answer, but it's still the way I would do it. All the ease of tables with all the power of CSS.
With blueprint the math is pretty easy. Let's say your form spans 10 columns.
<div id="contact-form" class="span-10">
<h3>Contact Form</h3>
<form action="contact">
<div id="form-sec-1" class="span-5">
<label>Name</label> <br/>
<input type="text" name="name" /> <br/>
<label>ZIP code</label> <br/>
<input type="text" name="zipcode" />
</div>
<div id="form-sec-2" class="span-5 last">
<label>Email</label> <br/>
<input type="text" name="email" /> <br/>
<label>Country</label> <br/>
<input type="text" name="country" />
</div>
<div id="form-sec-3" class="span-10 last">
<label>Message</label> <br/>
<textarea name="message" />
</div>
<div id="form-sec-4" class="span-8">
<input type="checkbox" name="copy"/>
<label>Send me a copy</label>
</div>
<div id="form-sec-5" class="span-2">
<input type="submit"/>
</div>
</form>
</div>

Oh wow,i was just thinking what in the world is the matter with the css world then i saw this css grid layout editors draft,http://dev.w3.org/csswg/css3-grid-align/
I still cannot explain why the css world hasn't really been thinking along such lines,what explanation can there be for the lack of such a feature in css.