How to use CSS to make an input fields behaves like a button click?


Tags: jquery,html,css

Problem :

Currently I need to make an input field to change value inside by clicking on it. I want to use CSS to make the field looks more like a button when it haven't been clicked. Is there any sample CSS I could follow? Here is my sample code: https://jsfiddle.net/TasteMyBiceps/sxw29n38/. Thank you!

$(document).ready(function(){
	$('#inp').prop('readonly','true');

	$('#inp').click(function(){
  	if($(this).val()==""){
			$(this).val("Yes");
    }
    else{
    	$(this).val("");
    }
    
    $(this).toggleClass('inputClick');
  });
});
#inp {
  width: 40px;
  text-align: center;
}

.inputClick {
    background: #D8D8D8;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>

<input id="inp" type=text />



Solution :

You can use border-style set to outset

input { 
  background:#eee;
  border-style:outset;
}

$(document).ready(function() {
  $('#inp').prop('readonly', 'true');

  $('#inp').click(function() {
    if ($(this).val() == "") {
      $(this).val("Yes");
    } else {
      $(this).val("");
    }

    $(this).toggleClass('inputClick');
  });
});
input { 
  background:#eee;
  border-style:outset;
}

#inp {
  width: 40px;
  text-align: center;
}
.inputClick {
  background: #D8D8D8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>

<input id="inp" type=text />


    CSS Howto..

    How to make specific line cut-off points without using
    breaks because it fails responsive design

    How to inject css into a document via ajax?

    CSS how to hide resize divs while keeping it centerd

    How to quickly create complex web controls for web development? [closed]

    How to add classes to div using jquery in sequence like animation

    Jquery: How to check if the element has certain css class/style

    How to set borders between children from parent in CSS?

    How to link Body/Html Backgrounds with CSS in Ipad/Iphone (safari)

    how to make css dropdown menu a dropup menu

    How to hide expand/collapse icon in vaadin treetable?

    how to crop images that has any size using css

    jQuery how to rapidly change color on divs with click

    How to add custom code to specific
  • s in wordpress while building navigation?
  • How to fix some issues with printing very basic HTML

    How can I achieve this transparency effect using css?

    How can I place the text in this box like this with CSS?

    How do I override the default way Wordpress' determines the .current-menu-item class?

    How to test file size on rspec (Rails 4/rspec3)

    How to change css style value using php in a for loop?

    How to Paginate Footnotes Properly in CSS & HTML (Print Media)

    PHPStorm: How do I setup LESS to output to CSS directory with file watcher?

    CSS How to make text to scale like an image

    How do I create a navigation system like that of Lowes.com [closed]

    How to display a css animation in the center of the screen

    How to make css counter works with css selector?

    How to make gradual colour change when hover with CSS?

    How to stop CSS selector from selecting all child elements

    How to target the text in an element but not the text in nested elements with CSS

    How to show “…” when there's not enough space to view all the text

    How to add the very last border on the sub menu items