I have an input box, which is quite small when it's loaded and I want it to resize to become bigger when the user clicks on it (with CSS).
The CSS code I have is:
input.tagInputField {
box-sizing: border-box;
border: none;
background-color: #fff;
width: 2em;
color: #000;
font-size: 14px;
}
input.tagInputField:focus {
width: 50px;
}
But it's not working... no response... Any ideas?
Thanks!
UPDATE
the html code (sorry for the pic, it was the fastest to get it this way)
It worked. Some other styles were overriding this one, so as per #putvande suggestion I checked that and added !important
input.tagInputField:focus {
width: 50px !important;
}
Related
So I have two input text boxes in a React app. I can enter input into one, but then it refuses to focus on the other. If I focus outside of the text box and click the other one, it refocuses on the first text box. If I reload the page and input into the second text box first, then it refuses to focus on the first text box.
I have tried the "-webkit-user-select: text;" approach I found in similar help questions, but to no avail. The issue only occurs on iOS devices.
Here's my SCSS -
.formField {
input {
border: 1px solid var(--line-color);
width: 380px;
height: 45px;
background-color: var(--background-color1);
padding: 10px;
font-size: 19px;
font-family: var(--font-family-semibold);
color: var(--text-color);
box-sizing: border-box;
&::placeholder {
font-size: 19px;
color: var(--placeholder-color);
font-family: var(--font-family-semibold);
}
&:focus {
padding: 9px;
outline: var(--onfocus-outline);
border: var(--onfocus-border);
border-radius: var(--onfocus-border-radius);
}
#include for-phone-portrait {
width: 310px;
height: 40px;
}}}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
How it appears
Better looking one
Actually had nothing to do with the SCSS. We were using the following method to set the correct position for character with the currency mask, and it was firing on both onChange and onBlur. Preventing it from firing onBlur removed this issue.
if (!isBlur) setTimeout(() => { inputElement.setSelectionRange(caretPos,
caretPos); },
I am new to WordPress . I used a plugin contact form 7, And I need to adjust its width of fields. for now it is 100 % width.
By doing some google I came to know that I need to edit custom CSS for this and I added these lines but still nothing
input[type="text"]
{
background-color: #fff;
color: #000;
width: 50%;
}
And i am using avada theme
I have solved the problem using this:
.wpcf7-form.init label{width:100%; max-width:inherit;}
input[type=text], #respond textarea, .post-password-form input[type=password], .wpcf7-form-control.wpcf7-date, .wpcf7-form-control.wpcf7-number, .wpcf7-form-control.wpcf7-quiz, .wpcf7-form-control.wpcf7-select, .wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-textarea {
width: 59%;
margin-bottom: 24px;
padding: 17px 30px;
border: 1px solid #ccc;
outline: 0;
font-size: 15px;
color: #797979;
font-family: "Crimson Text",serif;
-webkit-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You have to change the "width" element, in percentage.
Inspect the text field on browser and apply the same style to the class assigned to the input as per scope. I think the contact form input usually has a class name "input". Something like this might help
.et_pb_contact p input
{
background-color: #fff;
color: #000;
width: 50%;
}
It might not work because the plugin css styles are overridden by other styles. You might need to either add !important to your property as shown below.
input[type="text"] {
background-color: #fff;
color: #000;
width: 50% !important;
}
This is usually not recommended see this article https://uxengineer.com/css-specificity-avoid-important-css/.
The best approach is to add a class or id before the css style to apply the styling only to that element. See the full code below:
#form_container_with_contact_form input[type="text"] {
background-color: #fff;
color: #000;
width: 50%;
}
If you wanna adjust all your fields to be 100 % width, you can simply use this css:
input {
width: 100%;
}
If you need to specify certain fields:
input[type="text"] {
width: 100%;
}
As mentioned, there's a styling guide.
I'm trying to style my link with black background, using the code below:
a#link-1: link{
background: black;
padding: 20px;
}
However; it won't show up on the browser!
Please, check it out. This is the entire code
Is that the effect you want ?
https://jsfiddle.net/ehc5skbv/2/
a#link-1 {
background: #333;
padding: 10px;
}
I'm trying to make a button that's 11px by 11px, but it seems every browser I try has a minimum width of 12px for buttons (except IE9, which does 16px). Is there a way around this or do I need to use anchor tags?
My CSS
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
}
The Result in IE
Every browser has some default css. try using css reset
try adding padding and margin to 0 in your button css
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
padding:0;
margin:0;
}
Ok, so interesting question. I've been playing around here. And I'm running Safari on a Mac here.
For me, this works (I think) on a simple <button></button> element:
button {
width: 2px;
height: 2px;
padding: 0px;
box-sizing: border-box;
border: 0;
background: red;
}
I think the important thing to note is the box-sizing parameter. You can get more information about it here. Along with, of course, the padding​ style.
I want to create something like quicknote and at first I thought it will be easy task.
HTML
<div class="quicknote">
<textarea></textarea>
</div>
CSS
.quicknote
{
width: 308px;
height: 400px;
background: url('../images/note-bg.gif') 0 0;
outline: none;
padding: 10px;
}
.quicknote textarea
{
border: 0;
width: 100%;
height: 100%;
resize: none;
background: transparent;
outline: none;
font: 12px/22px Arial, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px dashed #aeaeae;
text-align: baseline;
}
Here is div which contains textarea. Textarea lineheight is set to 22px, when enter is pressed cursor is positioned on right place. (I know text is on the middle of the line).
But when scroll happen it seems text is not scrolled for 22px. Check out screen cast video to see what happend.
http://screencast.com/t/RYsPD5DH
I probably wouldn't see this without those lines in background. Does anyone know what is wrong here?
SOLUTION
I think that I have solution but don't ask me why this works. With little help of jQuery:
$textarea.on('scroll', function() {
$textarea.scrollTop($textarea.prop("scrollHeight"));
})
and experimenting with textarea height, on example 332px, 354px, it seems it works well. Because 332 isn't divided with 22, remineder is 2, when I changed above jQuery with:
$textarea.on('scroll', function() {
$textarea.scrollTop($textarea.prop("scrollHeight")+2);
})
all start to work as expected as you can see here http://screencast.com/t/pfhNJoUrSQS.
It appears to be working correctly with a 22px line height; however, you may want to remove the overflow:hidden property so that you can view scrolling.