I would like to increase the size (width) of the text input fields in my grails application.
I searched main.css and found a textarea entry, where I successfully increased textarea size.
Is there an equivalent for input text fields ? Or How to increase them ?
peter
Dortmund Germany
Try something like this:
This is a fancy search field where when you click the input text field it expands...
gsp
<div class="form-controller" id="s2">
<g:remoteField placeholder="${message(code: 'search.navbar.placeholder', default: 'Search ...')}" name="q" class="form-control" update="searchPanel" paramName="q" url="[controller:'environments', action:'search']"></g:remoteField>
</div>
css
#s2 {
display: inline-block;
*zoom: 1;
*display: inline;
}
#s2 input {
background: url(../images/search/search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
/* width: 150px;*/
margin-left: 1em;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
transition: all 0.7s ease 0s;
}
#s2 input:focus {
width: 200px;
background: url(../images/search/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
}
Try this in main.css:
input[type=text] {
width: 600px;
}
It worked for me.
Related
I have custom input thumb on my range slider and I want it to change color when it is changed to disabled
I tried adding class to thumb like this
input[type=range]::-webkit-slider-thumb.disabled
and also tried adding disabled directive
input[type=range]::-webkit-slider-thumb:disabled
and none of these works.
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 2px solid #ffffff;
height: 22px;
width: 22px;
border-radius: 50%;
background: linear-gradient(#FF6C2C,#FF2626);
margin-top: -9px;
z-index: 4;
}
I'd like it to be similiar to this:
input[type=range]::-webkit-slider-thumb:disabled {
background: #CCCCCC;
}
Is there any option that it can be done? I'm not allowed to user jquery.
Never mind i've finally found solution it should look like this:
input[type=range].disabled::-webkit-slider-thumb{
background: #CCCCCC;
}
"disabled" class should be after input[type=range] and then it will work
Write like this and magic started:
`
input[type="range"]:disabled::-webkit-slider-thumb {
opacity: 0.6 !important;
cursor: context-menu !important;
}
input[type="range"]:disabled::-moz-range-thumb {
opacity: 0.6 !important;
cursor: context-menu !important;
}
input[type="range"]:disabled::-ms-thumb {
opacity: 0.6 !important;
cursor: context-menu !important;
}
`
#myrange{
-webkit-appearance: none;
outline:none;
border: 2px solid #ffffff;
border-radius: 20px;
box-shadow: inset 0 0 5px rgba(0,0,0,1);
overflow:hidden;
}
#myrange::-webkit-slider-thumb{
-webkit-appearance: none;
height: 15px;
width: 15px;
border-radius:50%;
background:#000000;
box-shadow: -410px 0 0 400px #007bff;
cursor:pointer;
}
<input style="" type= "range" id="myrange" name="point_count" min= "0" max = "100" value= "10" disabled >
I'm struggling to set the div width to the remaining width of the container div. In the example below I want the red div (an input) to take as much space as possible. If you enter anything in the input the green div appears, which should always be right aligned.
I don't want to use either flex nor display: table-* or workarounds like setting overflow: hidden for to make space for floats.
EDIT: I'm looking for any solution that works for IE10+ (including display: table-*, etc.)
Example: https://codesandbox.io/s/23xo3wjjrp (Change the template and style tag inside /components/SearchBox.vue for changes)
The example uses vue, but for completeness I post the code here too:
HTML
<div class="ms-Fabric ms-SearchBox" :class="searchBoxStyle">
<div class="ms-SearchBox-iconContainer">
<i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
</div>
<input class="ms-SearchBox-field" type="text" placeholder="Search"
v-model="searchQuery" ref="input"
#blur="onBlur" #focus="onFocus">
<div class="ms-SearchBox-clearButton" v-show="searchQuery.length > 0"
#click="clear">
<i class="ms-SearchBox-icon ms-Icon ms-Icon--Clear"></i>
</div>
</div>
SCSS
// Active styles
.ms-SearchBox.is-active {
.ms-SearchBox-iconContainer {
width: 4px;
transition: width .167s;
.ms-SearchBox-icon {
opacity: 0;
}
}
}
// Static styles
.ms-SearchBox {
display: inline-block;
font-size: 0px;
font-weight: 400;
color: #333;
border: 1px solid #a6a6a6;
height: 32px;
padding-left: 8px;
width: 208px;
.ms-SearchBox-iconContainer {
font-size: 14px;
color: #106ebe;
transition: width .167s;
.ms-SearchBox-icon {
opacity: 1;
transition: opacity .167s 0s;
}
background: rgba(0, 0, 0, 0.2);
}
.ms-SearchBox-field {
display: inline-block;
font-size: 14px;
margin: 0;
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
border: none;
outline: 1px solid transparent;
height: 32px;
vertical-align: top;
background: rgba(255, 0, 0, 0.2);
}
.ms-SearchBox-iconContainer,
.ms-SearchBox-clearButton {
display: inline-block;
height: 32px;
line-height: 32px;
width: 32px;
text-align: center;
}
.ms-SearchBox-clearButton {
font-size: 14px;
background: rgba(0, 255, 0, 0.2);
&:hover {
cursor: pointer;
}
}
}
You should try to set a width:100% to your input, and to set position:absolute to your icon containers. With paddings on the input, this should do the thing.
Hope I understood the question :)
I have this CSS code for a textbox class and I'm on working on linux.
It's saved in a .css file and i'm using gedit. But the box-shadow property isn't recognized. All the others have that different font which shows a keyword or so. But not box-shadow. Any ideas please? It seems to work on windows when i use notepad++.
.textbox
{
background: white;
border: 1px solid #ffa853;
border-radius: 5px;
box-shadow: 0 0 5px 3px #00FFFF;
color: #666;
outline: none;
height:23px;
width: 275px;
}
You may be confusing box-shadow with text-shadow.
text-shadow applies to text, box applies to containers
I have made a small fiddle to demonstrate both
div {
width: 200px;
height: 300px;
background-color: #fff;
box-shadow: 10px 10px 5px grey;
}
p {
text-shadow: 1px 1px 2px black;
color: red;
font-size: 5em;
}
<div>
<p>
hello
</p>
</div>
if you are trying to adjust the appearance of an input (or a number of inputs)
a useful way of doing it is:
input[type="text"] {
/*your styles here*/
}
Im trying to use a cirlce for one of the radio button, but while using css3 im getting a blurriness around the border.
Here is the code
div {
height: 18px;
width: 18px;
overflow: hidden;
border-radius: 50%;
position: relative;
border-radius: 100px;
box-shadow: 10px 10px 10px -26px inset rgba(0, 0, 0, 1);
border:1px solid red;
}
Any idea how to avoid?
The radio input has a margin by default, and the border of the parent div only wraps around the whole div, so the margin makes it look weird.
I set the margin of the radio button to 3px to fit it in the center. Any blur seems to be fixed in my view.
<div class="rad">
<input type="radio" /> Radio Button
</div>
.rad {
height: 18px;
width: 18px;
overflow: hidden;
border-radius: 50%;
position: relative;
box-shadow: 10px 10px 10px -26px inset rgba(0, 0, 0, 1);
border:1px solid red;
overflow:hidden;
}
input {
margin: 3px !important;
}
https://jsfiddle.net/bp6fLo7c/1/
You could design your own radio button.
1) Disable default appearance :
-webkit-appearance: none;
appearance: none;
2) Style it as you want.
3) Style the "checked" state :
input[type="radio"]:checked {
background-color: red;
}
Demo : https://jsfiddle.net/Paf_Sebastien/fjoyajxn/
I have this HTML that I can't change:
<label for="accept">I accept.</label>
<input id="accept" type="checkbox">
Now, I have to use the CSS to move the checkbox to the left and style it with a custom image.
What I usually do in CSS, when input goes before label is to make the label act like the checkbox by and hide the actual input:
input[ type=checkbox ] {
display:none;
}
input[ type=checkbox ] + label {
display:inline-block;
padding-left: 25px;
cursor: pointer;
height: 25px;
background: url('image.png') 0 -5px no-repeat;
}
input[ type=checkbox ]:checked + label {
background: url('image.png') 0 -40px no-repeat;
}
However, in this case, when I try:
input[ type=checkbox ] {
display:none;
}
label + input[ type=checkbox ] {
display:inline-block;
padding-left: 25px;
cursor: pointer;
height: 25px;
background: url('image.png') 0 -5px no-repeat;
}
label + input[ type=checkbox ]:checked {
background: url('image.png') 0 -40px no-repeat;
}
not only that it doesn't show the background, but it even unhides the checkbox, so I end up with the default checkbox after the label.
How do I go about doing this without using JavaScript?
It is not possible to target the label element using the CSS siblings selector like you try in the second code sample, since CSS selectors are read from right to left.
What you can do is to use a pseudo-element instead, and hide the input element using absolute positioning:
input {
position: absolute;
left: -999em; /* asuming direction: ltr */
}
input:before {
margin-left: 999em;
float: left;
content: "";
/* styles for visual demo */
height: 25px;
width: 25px;
margin-top: -4px;
background: #ddd;
border: 1px solid #000;
}
input:checked:before {
background: #0f0;
}
label {
display: inline;
padding-left: 35px;
line-height: 27px;
}
Working example on JSFiddle
It is a little tricky to make this work cross-browser since not all browsers allow pseudo-elements in inputs (according to spec, it is correct to not allow it), but it can be done in the browsers which supports it.
Reminder: in cases like this, always try to have the HTML changed first or ask for a compromise for the design (that is, ask if it would be ok to have the checkbox to the right instead of to the left). CSS is quite nasty in the edges, and should not always be the solution just because of the possibility.
You can customize default html check box using css. Please have a look at my fiddle.
Custom Checkbox Sample
.customCheckBoxDiv {
position: relative;
float: left;
}
.customCheckBoxDiv span {
margin-left: 25px;
color: #0066cc;
}
.loginCheckBox {
opacity: 0;
position: absolute;
z-index: 1;
cursor: pointer;
}
.checkLabel {
width: 13px;
height: 13px;
border: 1px solid #00cc00;
background: #fff;
position: absolute;
left: 4px;
top: 3px;
}
.loginCheckBox:checked + label {
border: 1px solid #00cc00 !important;
background: #00cc00 !important;
box-shadow: inset -2px 0px 0px 0px #fff, inset 2px 0px 0px 0px #fff, inset 0px -2px 0px 0px #fff, inset 0px 2px 0px 0px #fff !important;
}
<div class="customCheckBoxDiv">
<input type="checkbox" value="None" class="loginCheckBox" name="check" checked />
<label class="checkLabel"></label> <span>Remember Me</span>
</div>