.button{
outline-color: rgba(0,0,0,0.7);
width:290px;
margin: 20px 10px 10px 5px;
height:80px;
font-size:44px;
color:orange;
background-color:rgba(0,0,0,0.7);
border: 0;
border-bottom:2px solid black;
cursor:pointer;
}
.button:hover{
background-color:rgba(0,0,0,0.7);
}
.button:focus{
background-color: rgba(0,0,0,0.7);
width: 300px;
}
<form action="" onsubmit="return submitMove()">
<label class="lable">First Coordinate</label>
<div><input class="button" type="text" id="currentCoordinate" onchange="backgroundColor: rgba(0,0,0,0.7)" onclick="clickInput()"></div>
<lable class="lable">Second Coordinate</lable>
<div><input class="button" type="text" id="moveToCoordinate" onchange="backgroundColor: rgba(0,0,0,0.7)" onclick="clickInput()"></div>
<button class="button" onclick="clickInput()">Submit move</button>
</form>
function clickInput() {
document.getElementById("currentCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
document.getElementById("moveToCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
}
What I wanted is to make the input field not change color in any way at all. Which I simply can't make works. Any solution which needed CSS or javascript is fine. I want the form color to remain black at all time. Or is there a way to stop the form from doing the drop down suggestion thing when you click on the input form? Thanks
I want the color to always be looking like the input form on the bottom, and not whitening up like the input form on top
Hover Effect
Remove this piece of code if you don't want the input color to change on hovering it:
.button:hover{
background-color:rgba(0,0,0,0.7);
}
Select Effect
Remove this piece of code if you don't want the input color to change on selecting it:
.button:focus{
background-color: rgba(0,0,0,0.7); // Remove this line
width: 300px;
}
,remove the onclick="clickInput()" from the Form and remove the function -
function clickInput() {
document.getElementById("currentCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
document.getElementById("moveToCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
}
Input Change Effect
Remove this piece of code if you don't want the input color to change when the data in the input box changes:
onchange="backgroundColor: rgba(0,0,0,0.7)"
Browser Effects
This is the default style added by the browser (Blue outline in most cases) to overcome this:
.button:focus{
outline: none; // Add this line
}
I have a span overlapping my input field, that updates its content as you type into the input field.
Even though I positioned the span perfectly on the input text, you can still see that the text is a little more bold and letters are thicker.
(field nr.1- with span, nr.2- without)
I tried hiding the entire input field, but then also the cursor disappears, without which typing is very confusing.
Is there a way that I could hide only the text of the input field?
Just set your input text invisible and the cursor black by:
#box {
color: transparent;
caret-color: black;
}
<input type="text" id="box" value="some_sample_text">
So this way the text is invisible but the currsor shows up. With your span overlaying this should be exactly what you want. But don´t forget your input field must have the same size and fontsize or the caret is on the wrong position.
Ok, after some time, here's what I landed on:
input{
position: absolute;
top: 25px;
left: 25px;
}
#bottom {
z-index: 1;
}
#top {
z-index: 3;
}
<div class="txt">
<input type="text" id="bottom" value="bottom_box">
<input type="text" id="top" value="top_box">
</div><br>
The select is hidden behind the text with opacity: 0 and will be opened normally with a click. My problem is, that the options got unwanted padding on top and bottom of the list in IE11 on Windows 8:
The padding comes from the changed height of the select. But I need it as large as the text to open it by click. I don't think there's any opportunity to reduce the select in height and open it with Javascript?
Running example:
div {
line-height: 50px;
font-size: 30px;
position: relative;
width: 300px;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
opacity: 0;
}
<div>
<select name="test" id="test">
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
<option>Sit</option>
<option>Amet</option>
</select>
<span>Open select</span>
</div>
Same problem occurs on the jQuery-Customselect-Plugin, which uses the same technique:
Also, I opened an issue on the plugin:
https://github.com/adamcoulombe/jquery.customSelect/issues/110
div {
line-height: 50px;
font-size: 30px;
position: relative;
width: 300px;
}
select {
/* changes */
padding-bottom: 0;
padding-top: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
opacity: 0;
}
<div>
<select name="test" id="test">
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
<option>Sit</option>
<option>Amet</option>
</select>
<span>Open select</span>
</div>
There is no way to remove padding from ie11 selects alone. Your best bet is to remove them all the selects and use css classes for uniquely styled ones.
Try adding a padding-top 0 px. Im not using ie11, but this could help.
select {
-webkit-appearance: none;
-moz-appearance: none;
padding-top:0px;
appearance: none;
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
opacity: 0;
}
You can still work with the :active state. Example uses padding:
select {
padding: 10px 0;
}
select:active {
padding: 0;
}
This may require some rigid positioning of the select element so it doesn't move when shrunk and made active, but that should be no issue.
Maybe you just need a CSS reset like this:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Just put it above the others (or something call it first). It will give you a fresh pallet and wouldn't conflict with your next codes. Each browser has it's own preferences, so it would be nice (if you just want) to have a zero-like thing at start and no more need to do some/much "magic tricks".
I've fixed it on my own with some JS magic:
Now the size of the select isn't increased by CSS. Instead it is bound to the mouse movement on the element. So the padding in the option list is fine and the select is opening by clicking at all position on the styled span.
I've added an example (the green one), where you can see the technique behind.
function onMouseMove(event) {
var $div = $(this);
var divOffset = $div.offset();
var $select = $(this).find('select');
var relX = event.pageX - divOffset.left;
var relY = event.pageY - divOffset.top;
$select.css('top', relY - 5);
if(
relY > $div.height() ||
relX > $div.width() ||
relY < 0 ||
relX < 0
) {
$select.css('top', 'auto');
}
}
function onSelectClick(event) {
if($(event.target).is('select') === false) {
return;
}
$(this).addClass('select-open');
}
function onSelectBlur() {
$(this).parent().removeClass('select-open');
}
function onSelectChange() {
$(this).parent().removeClass('select-open');
}
function onBodyClick(event) {
if($(event.target).is('select')) {
return;
}
$('div.select-open').removeClass('select-open');
}
$('body')
.on('mousemove', 'div:not(.select-open)', onMouseMove)
.on('click', 'div:not(.select-open) select', onSelectClick)
.on('change', 'select', onSelectChange)
.on('blur', 'select', onSelectBlur)
;
div {
font-size: 30px;
position: relative;
width: 300px;
margin-bottom: 30px;
}
span {
display: block;
border-bottom: 1px solid black;
width: 100%;
line-height: 35px;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 100%;
position: absolute;
top: 0;
opacity: 0;
padding: 0;
}
.visible-technique {
background: green;
}
.visible-technique select {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select name="test" id="test">
<option selected>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
<option>Sit</option>
<option>Amet</option>
</select>
<span>Open select</span>
</div>
<div class="visible-technique">
<select name="test" id="test">
<option selected>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
<option>Sit</option>
<option>Amet</option>
</select>
<span>Open select</span>
</div>
You can play with it on Codepen, too: http://codepen.io/roNn23/pen/OXyagN
Update
Sadly, I have to admit, that this bug can't be solved with this workaroud. The problem is, that there is no event to detect whether the select is closed. So you have sometimes to click two times to toggle the status and this isn't understandable for the user. So in my opinion, we have to live with this IE-bug when customizing the select. Otherwise you could use a select replacement script, but I wouldn't do this, because this is too much overhead for such a little problem.
Select is an html element that is rendered by browser. If you dont like the select component that browsers give you, you can design your own dropdown component using html, css, javascript.
Like what Telerik did
Telerik Kendo UI DropdownList
as i have gone through this problem before
and here i found very good reference link for that posted by Jerreck for the question
Question link
This extra whitespace is added by the browser's rendering engine. Form element rendering is inconsistent across browsers, and in this case is not determined by CSS.Take a look at this article from Mozilla explaining some ways to mitigate select box incosistency, then you might read this article from Smashing Magazine about styling form elements (be sure to check out the comments and the problems people have had with selects).
so for this i suggest that you might use any third party widget for select options for better UI consistency for select-option component it's my personal opinion. you can find widgets and plugins.
Note : one interesting fact for this padding is the height given to the this blank padding is appearing only when if you give height more than default height given by browser(IE) if you don't it will not add a padding at top and bottom
For Example :: if you give "60px" height then those padding will be 30px on top and 30px bottom i have marked this is just puts text of the tag in this.
The problem is the height of your select-element.
The first option of your option-list overlays with the visible select-text in IE11. The height of the selectbox generates a "padding", because the selectbox text is vertical middle aligned.
If you remove the height when the selectbox is active you shouldn't have a padding anymore.
select:active, select:focus {
height: auto;
}
EDIT:
In Win8 the selectbox loses the active-state on click so I added :focus - works for me :)
https://jsfiddle.net/s01xh3g5/1/
Selectbox height/"padding" culprit
Please try to set selected for the first option.
<select>
<option selected>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
Sorry I can't provide anymore information on the issue other than a screenshot, I've currently got no way to test on Windows with Chrome.
This is what the placeholders look like on Win7 Chrome:
Some relevant styles:
.field input, .field textarea {
width: 100%;
}
input, textarea {
background: #fbfbfb;
padding: 15px;
}
input {
line-height: normal;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
border: none;
}
label, input {
display: block;
}
HTML:
<div class="field">
<input id="cf-name" type="text" name="name" value="" placeholder="Name" autocomplete="off">
</div>
The page is here:
http://dev.metertech.co.uk/contact-us
Anyone faced this issue and know what's going on?
You have set the line-height for the inputs to be normal, but if you look at your placeholder pseudo-classes, you set them to be line-height: 2. So your placeholder text is trying to occupy more height than the actual height of your inputs, hence the "chopped off" placeholder text.
To fix it, remove the line-height property from the placeholders.
You probably also don't need line-height:normal - it is the default.
Here is your fix
input {
line-height: 28px;
}
I have got a problem, I'd like to select text that is inside a div, here is jsfiddle http://jsfiddle.net/KL6G3/
html:
<div id="connect">some text some text: <div id="select" onmouseover="this.focus();this.select();">when you hover over therer, it gets selected</div></div>
CSS:
#connect {
resize: none;
font-family: 'Ubuntu', sans-serif;
text-transform: uppercase;
position: relative;
top: 4px;
border: none;
}
#connnect:focus {
border: none;
}
#select {
display: inline-block;
}
When I hover over #select, text doesnt get selected, what am I doing wrong?
Thanks
this.focus(); and this.select(); will only work for input and textarea.
Here is a simple way:
Assign contenteditable attribute to that particular element. If user set focus into editable div then content of editable div is selected.
<div contenteditable="true" onmouseover="document.execCommand('selectAll',false,null)" id="connect">some text some text: <div>when you hover over therer, it gets selected</div></div>
JSFiddle Demo
What is the purpose of the selection? To highlight or to copy the text? You can use CSS to highlight and zero clipboard to copy, and combine both of them, if you want highlight and copy to clipboard. Avoid contenteditable if it is not an editable area.